Set div padding equal to an element's responsive height with jQuery

Question

So I have this page that I setup a sticky navbar and then a content below, with different sections. At the beginning of each section, there's a div that acts like an anchor, for which I have a working script so that it will scroll to that div once there's been a click on one of the menu's items.

The thing is: I need that anchor div's padding-bottom to be of equal size to the height of the menu, so that when the user clicks on a menu item and the page is scrolled, it reaches the beginning of its corresponding section. This doesn't work too well, maybe because I'm not a jQuery expert.

As well, the second trick is, when the page is being resized, the menu's height changes, and so I set up an event listener so that the padding-bottom of the anchor div (.test class div ) is set equal to the new height of the div. Here is a link for the online page with all the above as well as the link to a codepen. Thank you!

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


  
    
    

      Poetry
      
    
    
      
      Literature
      
    
    
      
      Games
      
    
    
      
      Music of my youth
      
    
    
      
      Minimalism
      
    
    
      
      Jazz
      
    
    
      
      Contemporary music
      
    
    
      
      Competitions
      
    
    
      
      neighbors
      
    


  











  
    

    
    
       TESTING PROCESS SECTION 1


      "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. 


    

    
    
    
      SECTION 2
      "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. 


    

    
    
    
      SECTION 3
      "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 


    


    
    
    
      SECTION 4
      "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 


    


    
    
    
      SECTION 5
      "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 


    

    
    
    
      SECTION 6
      "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 


    


    
    
    
      SECTION 7
      "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 


    


    
    
    
      SECTION 8
      "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
    


    
    
    
      SECTION 9
      "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

user_14837008 · Answer

Since you mentioned you would like some help on how to simplify everything, I made a little demo to show how i would do it. Disclaimer: i got no clue of isotope, so you might have to modify stuff.

I'll have to let you know i haven't tested it yet, but it should work and eliminate a lot of repetitive code. :)

Since you have a ton of divs with the same structure, it's simpler to create them with js than to manually write HTML for each one!

// 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 = $(``); // 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 = $('');
    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);

Regarding resize:

$(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

user_3309652 · Answer

OK, so I got this code that works. This is the scroll script

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

and then I got this to do the measurings of the reference position in comparison with the scroll position and all my a references have the class "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");   
    };
  });
};

and of course

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

I want to mention that this code is part of another code that I found on the internet and that it is not my creation. However, I adapted it to work in this case.

Final solution: And then I worked a bit and I got this:

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

Comment: jQuery is nice!

Set div padding equal to an element's responsive height with jQuery

2 Answers