1

I'm building a personal website and I want to make my navigation to shrink after I scroll down. The website consists of 4 divs with 100% height. Right now I am using a JS, that is shrinking the navigation after 300px scroll:

 <script>
   function init() {
     window.addEventListener('scroll', function(e){
          var distanceY = window.pageYOffset || document.documentElement.scrollTop,
              shrinkOn = 300,
              header = document.querySelector("header");
          if (distanceY > shrinkOn) {
              classie.add(header,"smaller");
          } else {
              if (classie.has(header,"smaller")) {
                  classie.remove(header,"smaller");
              }
          }
      });
  }
  window.onload = init();
</script>

My question is how to make the navigation to shrink after the first div?

2 Answers 2

0

you can use offsetTop to get the y-coordinate of the div, if you want to shrink your navigation when the top border of window touches the top border of the div then you can set your shrink variable value as -

shrink = div.offsetTop;

however if you want to shrink that after crossing the div then you can set the value of shrink to this -

shrink = div.offsetTop + div.offsetHeight

Hope it helps!

5
  • I am not sure if I did it right, but I couldn't make it work. However I used 'shrinkOn = slide_one.clientHeight,' and it works perfect. Thanks anyway!
    – Licheff
    Sep 14, 2015 at 17:07
  • @Licheff it works perfect (if you have used it correctly), see here a demo - jsfiddle.net/L6cgmu33 when the top border of first div touches the top window then the shrink class is added to #nav Sep 15, 2015 at 9:35
  • @Licheff see this demo - jsfiddle.net/L6cgmu33/1 this one adds the class 'shrink' when the user has scrolled to the bottom border of the first div, and I don't think the clientHeight solution will work, try setting margin-top on the first div and then see, I think it will not work, also try changing the height of your first div, in both cases that will fail, but you can experiment on my fiddle, change the height of the #first or change anything, it will work! Sep 15, 2015 at 9:46
  • It turns out that i misspelled my div's name. Right now I settled with shrinkOn = slide_one.clientHeight, and I put a bottom border on my div and it is working perfectly. The thing is that I am using ready-made scripts for the JS part, because I am not familiar with the syntax. All in all, right now is working perfectly. Thank you very much for the advises and the solutions that you've given!
    – Licheff
    Sep 16, 2015 at 6:27
  • @Licheff you're welcome!!, I have provided you with two ways how you want to shrink (after the first div goes offscreen or top of the window touches top of the div), use whichever you want, and let me know if any problem you face.. Sep 16, 2015 at 9:21
0

You can use

shrinkOn = firstDiv.clientHeight
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.