首页 / 技术问答 / Javascript问答列表 / 问答详情

Javascript 使用 jQuery 设置 div 填充等于元素的响应高度

所以我有这个页面，我设置了一个粘性导航栏，然后是下面的内容，有不同的部分.在每一节的开头，都有一个类似于锚的div，我为它准备了一个工作脚本，这样一旦点击菜单项，它就会滚动到该div.

问题是:我需要anchor div的填充底部大小与菜单的高度相等，这样当用户单击菜单项并滚动页面时，它就会到达相应部分的开头.这不太管用，可能是因为我不是jQuery专家.

同样，第二个技巧是，当调整页面大小时，菜单的高度会发生变化，因此我设置了一个事件侦听器，以便将锚定div(.test class div)的填充底部设置为等于div的新高度.下面是一个包含上述所有内容的在线页面链接，以及指向代码笔的链接.非常感谢.

http://canonseverywhere.net/test/test-mason/index.html

https://codepen.io/andra-vilcu/pen/mdpgBmY

/*my function for setting the padding-bottom for the scroll-to div class test the size of the height of the sticky navbar, so that it scrolls to it; and here is where the issue lies; this is ment for window resizing too, when the navbar fiv has a different height; and i want the .test div to have the padding-bottom equal to the size of that height, so that it shows the beginning of each sectionb on scroll;*/

/*var GetInnerHeight = $("div#navbar").innerHeight();*/
var GetInnerHeight = $(".grid").innerHeight();
$('.test').css("paddingBottom", GetInnerHeight);

$(document).ready(function() {
  $(window).resize(function() {


    var GetInnerHeight = $(".grid").innerHeight();
    $('.test').css("background-color", "pink");

  });
});

/*END*/

/*the isotop JS that works fine*/

// external js: isotope.pkgd.js


// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.element-item',
  layoutMode: 'fitRows',
  getSortData: {
    name: '.name',
    symbol: '.symbol',
    number: '.number parseInt',
    category: '[data-category]',
    weight: function(itemElem) {
      var weight = $(itemElem).find('.weight').text();
      return parseFloat(weight.replace(/[\(\)]/g, ''));
    }
  }
});

// filter functions
var filterFns = {
  // show if number is greater than 50
  numberGreaterThan50: function() {
    var number = $(this).find('.number').text();
    return parseInt(number, 10) > 50;
  },
  // show if name ends with -ium
  ium: function() {
    var name = $(this).find('.name').text();
    return name.match(/ium$/);
  }
};

// bind filter button click
$('#filters').on('click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  // use filterFn if matches value
  filterValue = filterFns[filterValue] || filterValue;
  $grid.isotope({
    filter: filterValue
  });
});

// bind sort button click
$('#sorts').on('click', 'button', function() {
  var sortByValue = $(this).attr('data-sort-by');
  $grid.isotope({
    sortBy: sortByValue
  });
});

// change is-checked class on buttons
$('.button-group').each(function(i, buttonGroup) {
  var $buttonGroup = $(buttonGroup);
  $buttonGroup.on('click', 'button', function() {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    $(this).addClass('is-checked');
  });
});

/*end isotope js*/

/*beginning of scroll js script that works fine as well*/

function scrollFunction1() {
  let e = document.getElementById("test1");
  e.scrollIntoView({
    block: 'start',
    behavior: 'smooth',
    inline: 'start'
  });
}

function scrollFunction2() {
  let e = document.getElementById("test2");
  // This ends the block to the window 
  // bottom and also aligns the view to the center 
  e.scrollIntoView({
    block: 'start',
    behavior: 'smooth',
    inline: 'start'
  });
}

function scrollFunction3() {
  let e = document.getElementById("test3");
  // This ends the block to the window 
  // bottom and also aligns the view to the center 
  e.scrollIntoView({
    block: 'start',
    behavior: 'smooth',
    inline: 'start'
  });
}

function scrollFunction4() {
  let e = document.getElementById("test4");
  // This ends the block to the window 
  // bottom and also aligns the view to the center 
  e.scrollIntoView({
    block: 'start',
    behavior: 'smooth',
    inline: 'start'
  });
}

function scrollFunction5() {
  let e = document.getElementById("test5");
  // This ends the block to the window 
  // bottom and also aligns the view to the center 
  e.scrollIntoView({
    block: 'start',
    behavior: 'smooth',
    inline: 'start'
  });
}

function scrollFunction6() {
  let e = document.getElementById("test6");
  // This ends the block to the window 
  // bottom and also aligns the view to the center 
  e.scrollIntoView({
    block: 'start',
    behavior: 'smooth',
    inline: 'start'
  });
}


function scrollFunction7() {
  let e = document.getElementById("test7");
  // This ends the block to the window 
  // bottom and also aligns the view to the center 
  e.scrollIntoView({
    block: 'start',
    behavior: 'smooth',
    inline: 'start'
  });
}



function scrollFunction8() {
  let e = document.getElementById("test8");
  // This ends the block to the window 
  // bottom and also aligns the view to the center 
  e.scrollIntoView({
    block: 'start',
    behavior: 'smooth',
    inline: 'start'
  });
}



function scrollFunction9() {
  let e = document.getElementById("test9");
  // This ends the block to the window 
  // bottom and also aligns the view to the center 
  e.scrollIntoView({
    block: 'start',
    behavior: 'smooth',
    inline: 'start'
  });
}

/*end of scroll script*/
* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}


/* ---- button ---- */

.button {
  display: inline-block;
  padding: 0.5em 1.0em;
  background: #EEE;
  border: none;
  border-radius: 7px;
  background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2));
  color: #222;
  font-family: sans-serif;
  font-size: 16px;
  text-shadow: 0 1px white;
  cursor: pointer;
}

.button:hover {
  background-color: #8CF;
  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
  color: #222;
}

.button:active,
.button.is-checked {
  background-color: #28F;
}

.button.is-checked {
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}

.button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}


/* ---- button-group ---- */

.button-group {
  margin-bottom: 7px;
}

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: 1px;
}

.button-group .button:first-child {
  border-radius: 0.5em 0 0 0.5em;
}

.button-group .button:last-child {
  border-radius: 0 0.5em 0.5em 0;
}


/* ---- isotope ---- */

.grid {
  /*border: 1px solid #333;*/
}


/* clear fix */

.grid:after {
  content: '';
  display: block;
  clear: both;
}


/* ---- .element-item ---- */


/*dimensiunea fiecarui element*/

.element-item {
  position: relative;
  float: left;
  /*width: 75px;*/
  width: auto;
  min-width: 115px;
  height: 37px;
  margin: 3px;
  padding: 6px;
  background: #888;
  color: #262524;
  border: 0.5px solid #333;
}

.element-item>* {
  margin: 0;
  padding: 0;
}

.element-item .name {
  position: absolute;
  left: 10px;
  top: 60px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: normal;
}

.element-item .symbol {
  position: absolute;
  left: 10px;
  top: 0px;
  font-size: 14px;
  font-weight: bold;
  color: white;
  width: auto;
}

.element-item .number {
  position: absolute;
  right: 8px;
  top: 5px;
}

.element-item .weight {
  position: absolute;
  left: 10px;
  top: 76px;
  font-size: 12px;
}

.element-item.alkali {
  background: #F00;
  background: hsl( 0, 100%, 50%);
}

.element-item.alkaline-earth {
  background: #F80;
  background: hsl( 36, 100%, 50%);
}

.element-item.lanthanoid {
  background: #FF0;
  background: hsl( 72, 100%, 50%);
}

.element-item.actinoid {
  background: #0F0;
  background: hsl( 108, 100%, 50%);
}

.element-item.transition {
  background: #0F8;
  background: hsl( 144, 100%, 50%);
}

.element-item.post-transition {
  background: #0FF;
  background: hsl( 180, 100%, 50%);
}

.element-item.metalloid {
  background: #08F;
  background: hsl( 216, 100%, 50%);
}

.element-item.diatomic {
  background: #00F;
  background: hsl( 252, 100%, 50%);
}

.element-item.halogen {
  background: #F0F;
  background: hsl( 288, 100%, 50%);
}

.element-item.noble-gas {
  background: #F08;
  background: hsl( 324, 100%, 50%);
}


/*pana aici tine stylesul ptr izotop; de aici incepe stylesul ptr scrooll*/

.outer-wrapper {
  margin: 0 auto;
  width: 100%;
}

.outer-wrapper div {
  margin: 0 auto;
  width: 100%;
}

#element {
  display: block;
  height: auto;
  width: auto;
  overflow: auto;
  margin: 10px auto 5px;
}

#el1 {
  display: block;
  height: auto;
  width: 1000px;
}

#el1 div {
  display: block;
  height: auto;
  width: 1000px;
}

#el1 p {
  text-align: justify;
}

#el2 {
  display: block;
  height: auto;
  width: 1000px;
}

#el2 div {
  display: block;
  height: auto;
  width: 1000px;
}

#el2 p {
  text-align: justify;
}


/* sticky menu css */


/* Style the navbar */

#navbar {
  overflow: auto;
  background-color: blue;
  /*era #333*/
  height: auto;
  position: fixed;
  width: 100%;
}

.test {
  padding-top: 0;
  margin-top: 0;
}

.test div {
  padding-top: 0;
  margin-top: 0;
}
<div id="navbar">
  <div class="grid" style=" width:69%; margin:0 auto !important; text-align:center;">
    <!-- de documentat -->
    <div onclick="scrollFunction1()" class="element-item transition metal " data-category="transition">

      <p class="symbol">Poetry</p>
      <!-- <p class="number">80</p>
                <p class="weight">200.59</p>-->
    </div>
    <div onclick="scrollFunction2()" class="element-item metalloid " data-category="metalloid">
      <!-- <h3 class="name">Tellurium</h3>-->
      <p class="symbol">Literature</p>
      <!--<p class="number">52</p>
                <p class="weight">127.6</p>-->
    </div>
    <div onclick="scrollFunction3()" class="element-item post-transition metal " data-category="post-transition">
      <!--<h3 class="name">Bismuth</h3>-->
      <p class="symbol">Games</p>
      <!-- <p class="number">83</p>
                <p class="weight">208.980</p>-->
    </div>
    <div onclick="scrollFunction4()" class="element-item post-transition metal " data-category="post-transition">
      <!-- <h3 class="name">Lead</h3>-->
      <p class="symbol">Music of my youth</p>
      <!--  <p class="number">82</p>
                <p class="weight">207.2</p>-->
    </div>
    <div onclick="scrollFunction5()" class="element-item transition metal " data-category="transition">
      <!--<h3 class="name">Gold</h3>-->
      <p class="symbol">Minimalism</p>
      <!--  <p class="number">79</p>
                <p class="weight">196.967</p>-->
    </div>
    <div onclick="scrollFunction6()" class="element-item alkali metal " data-category="alkali">
      <!-- <h3 class="name">Potassium</h3>-->
      <p class="symbol">Jazz</p>
      <!--  <p class="number">19</p>
                <p class="weight">39.0983</p>-->
    </div>
    <div onclick="scrollFunction7()" class="element-item alkali metal " data-category="alkali">
      <!--  <h3 class="name">Sodium</h3>-->
      <p class="symbol">Contemporary music</p>
      <!--  <p class="number">11</p>
                <p class="weight">22.99</p>-->
    </div>
    <div onclick="scrollFunction8()" class="element-item transition metal " data-category="transition">
      <!-- <h3 class="name">Cadmium</h3>-->
      <p class="symbol">Competitions</p>
      <!--  <p class="number">48</p>
                <p class="weight">112.411</p>-->
    </div>
    <div onclick="scrollFunction9()" class="element-item alkaline-earth metal " data-category="alkaline-earth">
      <!--<h3 class="name">Calcium</h3>-->
      <p class="symbol">neighbors</p>
      <!--  <p class="number">20</p>
                <p class="weight">40.078</p>-->
    </div>


  </div>



</div>
<!-- end sticky menu -->


<!-- begins the scrolling sections -->
<div class="outer-wrapper">


  <div id="element" class="inner-wrapper">
    <!-- clasa nealocat-->

    <div id="test1" class="test" style="border:3px solid yellow;"></div>
    <div id="el1">
      <h1> TESTING PROCESS SECTION 1</h1><br>
      <p>"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue;
        and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. </p><br>
    </div>

    <div id="test2" class="test" style="border:3px solid red;"></div>
    <!-- scroll to style="padding-bottom:80px;" -->
    <div id="el2">
      <h1>SECTION 2</h1>
      <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
        mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
        assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates. </p><br>
    </div>

    <div id="test3" class="test" style="border:3px solid pink;"></div>
    <!-- scroll to style="padding-bottom:80px;" -->
    <div id="el2">
      <h1>SECTION 3</h1>
      <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
        mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
        assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
        ut aut </p><br>
    </div>


    <div id="test4" class="test" style="border:3px solid purple;"></div>
    <!-- scroll to style="padding-bottom:80px;" -->
    <div id="el2">
      <h1>SECTION 4</h1>
      <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
        mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo </p><br>
    </div>


    <div id="test5" class="test" style="border:3px solid red;"></div>
    <!-- scroll to style="padding-bottom:80px;" -->
    <div id="el2">
      <h1>SECTION 5</h1>
      <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
        mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
        assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis </p><br>
    </div>

    <div id="test6" class="test" style="border:3px solid red;"></div>
    <!-- scroll to style="padding-bottom:80px;" -->
    <div id="el2">
      <h1>SECTION 6</h1>
      <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
        mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
        assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis </p><br>
    </div>


    <div id="test7" class="test" style="border:3px solid red;"></div>
    <!-- scroll to style="padding-bottom:80px;" -->
    <div id="el2">
      <h1>SECTION 7</h1>
      <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
        mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
        assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis </p><br>
    </div>


    <div id="test8" class="test" style="border:3px solid red;"></div>
    <!-- scroll to style="padding-bottom:80px;" -->
    <div id="el2">
      <h1>SECTION 8</h1>
      <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
        mollitia animi, id est laborum et dolorum
    </div>


    <div id="test9" class="test" style="border:3px solid red;"></div>
    <!-- scroll to style="padding-bottom:80px;" -->
    <div id="el2">
      <h1>SECTION 9</h1>
      <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
        mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas
        assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis </p><br>
    </div>

  </div>

</div>
<!-- end outer wrapper -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>

推荐答案

好的，我得到了这个有效的代码.这是滚动脚本

   $(function(){
      $('a[href^="#"]:not([href="#"])').click(function(){
        $("html, body").animate({
          scrollTop: $($(this).attr("href")).position().top 
        }, 500);
        return false;
      });
    });

然后我用这个来测量参考位置和滚动位置的比较，我所有的a参考都有"tab"类

function lineMove(){
  $('.tab').each(function (){
    var scrollPos = $(document).scrollTop();
    var linkRef = $($(this).attr("href"));
    var refPos = linkRef.position().top;
    var refHeight = linkRef.height();
    if(refPos <= scrollPos && refPos + refHeight > scrollPos){
      $('.tab').removeClass("active-tab");
      $(this).addClass("active-tab");   
    };
  });
};

当然了

$(document).ready(function(){
  //On document load:
    lineMove();
  //On window scroll or resize:
  $(window).on("scroll resize", lineMove);
});

我想说的是，这段代码是我在互联网上找到的另一段代码的一部分，它不是我创作的.然而，我对它进行了调整，以适应这种情况.

最终解决方案:然后我做了一些工作，我得到了这个:

function paddingTop (){
    var divHeight = $("div#id").innerHeight(); 
    $("#testbeta").css("padding", divHeight); /
    
};

comments :jQuery很好！

Javascript相关问答推荐

如何在加载的元数据上使用juserc和await中获得同步负载？

脚本.js：3：20未捕获的类型错误：无法读取空的属性(读取addEventHandler)

为什么在获取回调内设置状态(不会)会导致无限循环？

无法将nPM simplex-noise包导入在JS项目中工作

react 路由加载程序行为

是否有方法在OpenWeatherMap API中获取过go 的降水数据？

如何在表格上拥有水平滚动条，在正文页面上拥有垂直滚动条，同时还对html表格的标题使用位置粘性？

从Node JS将对象数组中的数据插入Postgres表

html + java script！需要帮助来了解为什么我得到(无效的用户名或密码)

Ember.js 5.4更新会话存储时如何更新组件变量

编辑文本无响应.onClick(扩展脚本)

当使用'；字母而不是与'；var#39；一起使用时，访问窗口为什么返回未定义的？

搜索功能不是在分页的每一页上进行搜索

使每个<；li>；元素的 colored颜色 与随机生成的 colored颜色 列表不同(不重复

将相关数据组合到两个不同的数组中

我不知道如何纠正这一点.

不协调嵌入图片

为什么NULL不能在构造函数的.Prototype中工作

react 路由DOM有条件地呈现元素

Refine.dev从不同的表取多条记录

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630