How to Make Div Fixed After You Scroll to That Div

How to make div fixed after you scroll to that div?

This is now possible with CSS only, see https://stackoverflow.com/a/53832799/1482443

---

In case anyone needs jQuery approach, below is the original answer as it was posted years ago:

I know this is tagged html/css only, but you can't do that with css only. Easiest way will be using some jQuery.

var fixmeTop = $('.fixme').offset().top;       // get initial position of the element

$(window).scroll(function() {                  // assign scroll event listener

    var currentScroll = $(window).scrollTop(); // get current position

    if (currentScroll >= fixmeTop) {           // apply position: fixed if you
        $('.fixme').css({                      // scroll to that element or below it
            position: 'fixed',
            top: '0',
            left: '0'
        });
    } else {                                   // apply position: static
        $('.fixme').css({                      // if you scroll above it
            position: 'static'
        });
    }

});

http://jsfiddle.net/5n5MA/2/

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.

How to make a div fixed while scrolling

I think what you are looking for is Sticky Elements in JQuery with waypoints if I'm correct. Take a look at this page: JQuery Waypoints

How to make the Div fixed at a particular scroll location?

You need to have a container div for the div that will be fixed. The div that you want to show always at the top will be inside this div like this:

<div id="fixedDivWrapper">
  </div id="scroll">
    This stays still!
  </div>

and your css:

position: fixed; /*This fixes it to the top of the div.*/
top: 20px; /*Margin at the top of the fixed div*/

Fixed scroll div after certain height and then stops after reach other div?

You don't need javascript for that, you can use position: sticky

HTML: (you don't need those extra divs)

<div class="d" id="fixedscroll">
  <img src="https://ormuco.com/wp-content/uploads/2018/08/Large-Rectangle-336-x-280-Google-Ads-1-1-336x250.jpg">
</div>

CSS:

.d {
  background-color: #FFF000;
  width: 336px;
  height: 600px;
  margin: 0px auto;
}

#fixedscroll img {
  position: sticky;
  top: 0px;
}

Check it working https://jsfiddle.net/w9n2ubmg/

https://developer.mozilla.org/en-US/docs/Web/CSS/position

Scroll Div with a Position Fixed child

#wrapper {  background: red;  overflow-y: scroll;  height: 100px; border: solid 1px;}#header {  background: lightblue;  height: 200px; overflow-y: none;}#content {  background: green;}#popup {  background: yellow;  position: fixed;  top: 0;  opacity: 0.5;  pointer-events: none;}

<div id="wrapper">  <div id="header">Headerum textum</div>  <div id="content">    Contentum Textum    <div id="popup">      Popup textum, lorem ipsum dolor sit amet, consectetur adipiscing elit. ... Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula.    </div>  </div></div>

When scrolling - make an element fixed only when hit div

You can try belo example: In this example, when the div is on your screen it will add fixed-top class to the div

$(window).scroll(function(){
  $('.divv').each(function(){
    if(isScrolledIntoView($(this))){
      $('.divv').addClass('fixed-top');
    }
    else{
      $('.divv').removeClass('fixed-top');
    }
  });
});

function isScrolledIntoView(elem){
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

---

Related Topics