CODEWITHSUNDEEP
jquerycss
Jesse Elser
Jesse Elser

Reputation: 976

Div Scroll With Page Using Jquery

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

Upvotes: 2

Views: 2645

Answers (1)

Joey Chong
Joey Chong

Reputation: 1500

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>

Upvotes: 2

Related Questions