Jquery Position Div Fixed at Top on Scroll

jQuery position DIV fixed at top on scroll

instead of doing it like that, why not just make the flyout position:fixed, top:0; left:0; once your window has scrolled pass a certain height:

jQuery

  $(window).scroll(function(){
      if ($(this).scrollTop() > 135) {
          $('#task_flyout').addClass('fixed');
      } else {
          $('#task_flyout').removeClass('fixed');
      }
  });

css

.fixed {position:fixed; top:0; left:0;}

Example

jQuery position DIV fixed on scroll

You need to store the initial distance outside the scroll function - otherwise it
will get recalculated every scroll. Here is the working fiddle: http://jsfiddle.net/donal/8h4knr9r/5/

The JS should look like this:

var distance = $('#navigation-sections').offset().top; 

$(window).scroll(function () {

     if ($(window).scrollTop() >= distance) {
         $('#navigation-sections').addClass("affix");

     } else {
         $('#navigation-sections').removeClass("affix");
     }
 });

Fix div when position reaches 85px from top of window on scroll

Please modify the code like this and check

$(function(){
    // Check the initial Position of the fixed_nav_container
    var stickyHeaderTop = $('.middle_block2').offset().top;

    $(window).scroll(function(){
        if( $(document).scrollTop() > stickyHeaderTop-85 ) {
            $('.middle_block2').css({position: 'fixed', top: '85px'});  
        } else {
            $('.middle_block2').css({position: 'relative', top: '0px'});
        }
    });
});

Updated Fiddle : https://jsfiddle.net/u9adhkc7/4/

jQuery position DIV fixed at top on scroll except homepage

You should check if you're on the homepage:

if (location.pathname === "/") {
    $('#task_flyout').removeClass('fixed');
} else {
    $(window).scroll(function(){
        if ($(this).scrollTop() > 135) {
            $('#task_flyout').addClass('fixed');
        } else {
            $('#task_flyout').removeClass('fixed');
        }
    });
}

css/jquery scroll-fixed div issues

I suppose you should move button and offset assignment out of scroll callback:

    var button = $('.button-mobile');
    var offset = button.offset().top;

    $(window).scroll(function () {
        position = button.position().top;
        console.log(position);
        if ($(this).scrollTop() >= offset) {
            $('.button-mobile').css({
                "max-height": "100%",
                "position": "fixed",
                "overflow-y": "auto",
                "top": "40px",
                "z-index": "1"
            });
        } else {
            $('.button-mobile').css({
                "position": "static",
                "top": "none",
                "overflow-y": "none",
                "z-index": "none"
            });
        }
    });

Detect when a div with fixed position crosses over another element

You have to take the div heights in account.

There is two "moments" to caculate, the enter and the leave.

So when the bottom of the fixed div enters the top of the scrolled one...

And when the bottom of the scrolled one leaves the top of the fixed.

Here is an example to run:

$(window).scroll(function(){  var fixed = $("div.fixed");    var fixed_position = $("div.fixed").offset().top;  var fixed_height = $("div.fixed").height();
  var toCross_position = $(".div-to-cross").offset().top;  var toCross_height = $(".div-to-cross").height();
  if (fixed_position + fixed_height  < toCross_position) {    fixed.removeClass('white');  } else if (fixed_position > toCross_position + toCross_height) {    fixed.removeClass('white');  } else {    fixed.addClass('white');  }
});

.fixed{  position:fixed;  top:calc(50% - 50px);  left:0;  background-color:black;  height:100px;  width:100%;}.white{  background-color:white;}.div-to-cross{  height:100px;  background-color:blue;}
/* just for this demo */.spacer{  height:400px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fixed"></div><div class="spacer"></div><div class="div-to-cross"></div><div class="spacer"></div>

How can I make a div stick to the top of the screen once it's been scrolled to?

You could use simply css, positioning your element as fixed:

.fixedElement {
    background-color: #c0c0c0;
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
}

Edit: You should have the element with position absolute, once the scroll offset has reached the element, it should be changed to fixed, and the top position should be set to zero.

You can detect the top scroll offset of the document with the scrollTop function:

$(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $el.css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 && isPositionFixed){
    $el.css({'position': 'static', 'top': '0px'}); 
  } 
});

When the scroll offset reached 200, the element will stick to the top of the browser window, because is placed as fixed.

top menu's position fixed but on scroll part from next div disappears

You can solve this with CSS only.

Set .first to position: fixed

Vertically offset .second by the height of .first using margin-top

.first {
  height: 150px;
  position: fixed;
  top: 0;
}

.second {
  margin-top: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="first">
  <img src="https://via.placeholder.com/350x150">
  <map name="">
    <area target="" alt="" title="home" href="index.html" coords="1,60,95,115" shape="rect">
  </map>
</div>

<div class="second">
  <img src="https://via.placeholder.com/350x150">
  <map name="">
    <area shape="" coords="" href="" alt="">
  </map>
</div>

---

Related Topics