使用jQuery設定div填充等于元素的回應高度-有解無憂

所以我有這個頁面，我設定了一個粘性導航欄，然后是下面的內容，有不同的部分。在每個部分的開頭，有一個 div 就像一個錨點，為此我有一個作業腳本，因此一旦單擊選單項之一，它就會滾動到該 div。

問題是：我需要錨 div 的 padding-bottom 的大小與選單的高度相同，這樣當用戶單擊選單項并滾動頁面時，它會到達相應部分的開頭。這不太好用，可能是因為我不是 jQuery 專家。

同樣，第二個技巧是，當頁面調整大小時，選單的高度會發生變化，因此我設定了一個事件偵聽器，以便將錨 div（.test class div）的 padding-bottom 設定為等于新的div的高度。這是包含以上所有內容的在線頁面的鏈接以及指向 codepen 的鏈接。謝謝！

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

uj5u.com熱心網友回復：

既然你提到你想要一些關于如何簡化一切的幫助，我做了一個小演示來展示我將如何做到這一點。免責宣告：我不知道同位素，所以你可能需要修改東西。

我得告訴你我還沒有測驗過它，但它應該可以作業并消除很多重復的代碼。:)

由于您有大量具有相同結構的 div，因此使用 js 創建它們比為每個手動撰寫 HTML 更簡單！

// you could dynamically create your elements in js, saves some headache
// when working with a lot of data.
// simply create an object with all the properties you need for your elements!

let obj1 = {
    className: 'metal',
    transition: True, // could use boolean if it can only be in or out of transition
    text: 'Games'
}

let obj2 = {
    className: 'metalloid',
    transition: False,
    text: 'Literature'
}

function createElementItem(myObj) {
    // myObj is sort of a "template" for the property we will pass to this function.
    // we will call the function below with our objects we just created

    // you can create DOM elements by using <>, just don't forget to close!
    // if you do not insert it somewhere, it won't show up though. See bottom.
    let elem = $(`<div />`); // create div element
    elem.addClass(myObj.className); // add the class name
    let transition_name = myObj.transition ? 'transition' : 'post-transition';
    // explanation: fancy ternary operator is fancy. 
    // the left part (myObj.transition) is a Boolean type. The '?' operator
    // checks if the statement is true. If true, it returns the next option
    // 'transition'. If false, it returns 'post-transition'.
    elem.addClass(transition_name); // here we add the transition name.
    elem.data('category', transition_name); // and also set data-transition to the same value.

    let symbol_elem = $('<p  />');
    symbol_elem.text(myObj.text); // give symbol element your text
    symbol_elem.appendTo(elem); // insert the symbol element in element div

    let grid_elem = $('div.grid'); // select your grid, where you append element-items
    elem.appendTo(grid_elem); // and finally append your whole element to the existing grid

    // now the fun part: event listeners.
    // since we are in the same function, it's easy to access each element!
    elem.on('click', (e) => {
        let elem = $(this); // in this case, $(this) refers to element that has been clicked
        // you could also use $(e.target) instead of $(this)
        console.log('they see me scrollin');
        elem.scrollIntoView({
            block: 'start',
            behavior: 'smooth',
            inline: 'start'
        });
    })
}

// here is where the magic happens.
// we invoke our function, passing the objects from the top as a param
// so the function can access the important stuff
// this spits out the object HTML, injects it into DOM and applies the event listener all-in-one
createElementItem(obj1);
createElementItem(obj2);

關于調整大小：

$(window).on('resize', (e) => {
    // do not start variable names with Uppercase letters, this is 
    // reserved for classes!
    let innerHeight = $(".grid").innerHeight();
    $('.test').css("padding-bottom", innerHeight); // this SHOULD work...
});

// i think you're having a problem with putting the resize event
// listener in document.ready, but not 100% sure, would have to test
// since document.ready only executes once

uj5u.com熱心網友回復：

好的，所以我得到了這個有效的代碼。這是滾動腳本

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

然后我用它來測量參考位置與滾動位置的比較，我所有的參考都有“標簽”類

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); /
    
};

評論：jQuery 不錯！

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/463884.html

標籤：javascript html jQuery css

上一篇：有沒有辦法用jQuery按鈕洗掉這個div？

下一篇：SequelizefindAlluserswithIdbutreturnusersfromdifferentcolumn