Change edge of top of div based on window scroll

Question

I have a panel at the top of my page that is fixed. When the user scrolls to a certain point, I want the panel to start moving up, as if it were relatively or absolutely positioned.

At the moment, the css of the panel is changing from fixed to absolutely positioned, but, of course, this sets the div directly to the top of the page.

I've been looking at this for ages and can't figure out how I would click the bar one pixel for every pixel scrolling past _triggerOffset

Can someone enlighten me?

function banner(){ var _barOffset = $('#top-bar').outerHeight(), _navOffset = $('#navigation').offset().top, _triggerOffset = _navOffset-_barOffset; $(window).scroll(function() { var _scroll = $(window).scrollTop(); if (_scroll >= _triggerOffset) { $('#top-bar').css({'position':'absolute'}); } }); } banner(); 

Answer 1

I made a violin.

Check out this script

Working demo

 $(document).ready(function() { var postionToTriggerMove = 500; var positioninitial = $(window).scrollTop(); var positioninitialLine = $(".line").offset().top; $(window).scroll(function() { var _scroll = $(window).scrollTop(); if(_scroll > positioninitial) { if(_scroll >= (postionToTriggerMove - 5) && _scroll <= (postionToTriggerMove + 5) ) { var topBarPostion = $(".line").offset().top; $('.line').css({'position':'absolute',"top":topBarPostion}); } } else { if(_scroll >= (postionToTriggerMove - 5) && _scroll <= (postionToTriggerMove + 5) ) { var topBarPostion = $(".line").offset().top; $('.line').css({'position':'fixed',"top":positioninitialLine}); } } positioninitial = _scroll; }); }); 

Answer 2

You can try something like below:

 function banner(){ var _barOffset = $('#top-bar').outerHeight(), _navOffset = $('#navigation').offset().top, _triggerOffset = _navOffset-_barOffset; $(window).scroll(function() { var _scroll = $(window).scrollTop(); if (_scroll >= _triggerOffset) { $('#top-bar').css({'position':'absolute','top':_triggerOffset - (_scroll-_triggerOffset)}); } }); } banner(); 

This code is very unverified, however, what we do initially sets the element to an absolute position and defines the top of this element as _triggerOffset, then we take the difference between the current scroll and triggerOffset and subtract it from the top position to make the panel move up, so more you scroll down.

I'm not sure what you meant, but I would look at such a solution. You might want to add some conditions to ensure that the top level never falls below 0 or the browser disappears from the screen.

Answer 3

Thanks, played with both examples, and they worked well.

In the end, I changed my code and instead of making a position in the upper top 0px, I made the upper position with pixels equal to the offset distance. I don’t know why I didn’t think about it before.

In another note, I use Shinov's code for an anonymous project, since I really like it :)

thanks

 function banner(){ var _barOffset = $('#top-bar').outerHeight(), _navOffset = $('#navigation').offset().top, _triggerOffset = _navOffset-_barOffset; $(window).scroll(function() { var _scroll = $(window).scrollTop(); if (_scroll >= _triggerOffset) { $('#top-bar').css({'position':'absolute', 'top':_triggerOffset+'px'}); }else if (_scroll <= _triggerOffset){ $('#top-bar').css({'position':'fixed', 'top':'0px'}); } }); }