Moving html element up and down as you scroll the page

Replace the html element id #the-movable-element-id with yours, and add the following at the end of your html page. The html element will be moving up and down as you scroll the page up and down. It uses the jquery scroll function to detect the scroll event of the window.

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  console.log("scrollTop>>>" + scrollTop);
  if (scrollTop == 0) {
   $("#the-movable-element-id").css({"margin-top": "0px"});    
  } else {
   $("#the-movable-element-id").css({"margin-top": ($(window).scrollTop()) + "px"});    
  }
});

Issue: in case it’s not working that the $(window).scroll() is never called, make sure your css doesn’t have something like this. The overflow in this will cause conflicts with the window scroll, just remove the overflow in the css, it should be fine.

html,body {
    height: 100%;
    overflow-x: hidden;
}

Search within Codexpedia

Custom Search

Search the entire web

Custom Search