Div Scroll With Page Using Jquery

Question

I'm trying to make my menu scroll with the user.

This is relativly simply using:

#main-header-wrapper {
    width: 100vw;
    height: 75px;
    position: absolute;
    top: 0;
    left: 0;
}

What I wanted was an animated type of scroll though, which was achievable using JQuery:

$(window).scroll(function(){
  $("#main-header-wrapper").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
});

With this Jquery solution the menu bar slides down from the top after the user stops scrolling.

But when the user scrolls up the bar appears to "stick" to the page before scrolling back up.

What I'd like to achieve is the down scroll animation still working as is, but if the user scrolls up then there is no animation at all. The bar is simply at the top of the page during the entire scroll.

Codepen: http://codepen.io/think123/pen/mAxlb

The Jquery was taken from: How do I make a <div> move up and down when I'm scrolling the page?

I did come up with a solution by using the accepted answer from here: How can I determine the direction of a jQuery scroll event?

But this method just seems crude, but it achieves the desired effect.

Is there a better way to achieve this?

My solution:

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
        $("#div").stop().animate({"marginTop":  ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
   } else {
      $("#div").css({"margin-top": ($(window).scrollTop()) + "px", "margin-left":($(window).scrollLeft()) + "px"});
   }
   lastScrollTop = st;
});

I put a CodePen together so you may view the desired effect using my solution: http://codepen.io/anon/pen/XjXpZv

Does it have to animate? Any reason why you can't fix the navigation (with a higher z-index) when a user has scrolled past the height of initial state of the navigation? (removing of course when they scroll back to top of the page). That's how I do and it works reliably for me. You'll need to add a margin bottom though to offset the height of your header that is lost when it becomes fixed so the content underneath doesn't jump. — ash, Sep 13 '16 at 06:07
It's just for aesthetics. I have it working the way I want it to, but I feel like there is a "cleaner" method. My solution just seems as though it's messy jquery. — Jesse Elser, Sep 13 '16 at 06:10

score 2 · Accepted Answer · answered Sep 13 '16 at 08:54

To achieve the effect, I removed the code at where st <= lastScrollTop. Then, I changed the marginTop to top instead and when the animation done, I set the position to fixed with top and left equals to 0px. Attached the snippet code. Hopefully this is the effect that you want.

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
        $("#div").css("position", "absolute");
        $("#div").stop().animate({"top":  ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, {duration: "slow", done: function(){
     $("#div").css("position", "fixed");
     $("#div").css("top", "0px");
     $("#div").css("left", "0px");
        }});
   } else {

   }
   lastScrollTop = st;
});
var totaltext = "";
for (var i = 0; i < 100; i++) {
  totaltext += "scroll!<br />";
}
$("#div2").html(totaltext);

#div {
  background-color: #fca9a9;
  width: 100%;
  height: 50px;
  line-height: 50px;
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div">Tralalalala</div>
<div id="div2"></div>

That's perfect! Much appreciated. :) – Jesse Elser Sep 13 '16 at 14:47 — Jesse Elser, Sep 13 '16 at 14:47

Div Scroll With Page Using Jquery

1 Answers1