purple11111 purple11111 -4 years ago 107
CSS Question

Make window scroll function operate only in one div

On a webpage I have multiple sections. In one of this sections I show lots of content blocks. These blocks can be filtered via a panel that floats on the right side.

Currently this floating panel is visible on all the sections of the webpage but I want it to only be visible within the section that I assign it to.

Ideally I would want it to have it stuck in the top right corner of the section on page load. Then when the user gets to the section it needs to keep scrolling with the user until it reaches the end then it needs to stay there.

When the user is finished on the page and scrolls back upwards it needs to do the same as above only in reverse order.

What needs to be done




  • Make it only visible within the section (assigning a specific section)

  • Make it stuck in the top right corner on page load

  • Disallow continuing to the next section after reaching the end of the assigned section.



jsFiddle



https://jsfiddle.net/nfuL86hg/

HTML:

<div id="section-aaa"></div>
<div id="section-bbb">
<div id="content"></div>
<div id="scroller">
Hello<br>
World<br>
</div>
</div>
<div id="section-aaa"></div>


JS:

(function ($) {
$(document).ready(function() {
$(window).scroll(function(){
$("#scroller").stop().animate({"marginTop": ($(window).scrollTop()) + "px", "marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
});
});
})(jQuery);


CSS:

#section-aaa{
position:relative;
height:500px;
background:red;
}
#section-bbb {
position:relative;
height:1000px;
background:grey;
}
#content {
height:100%;
}
#scroller {
background-color: #fca9a9;
width: 250px;
position: absolute;
top: 50px;
right: 0;
z-index: 1;
}


Thanks everyone for helping.

PS: If you know a better title please post it in the comment area. At the moment I could not think of a better one.

Answer Source

here is one demo

https://jsfiddle.net/nfuL86hg/2/

(function ($) {
  $(document).ready(function() {
    $(window).scroll(function(e){
     if(getIsInArea()){
     console.log('animate');
        $("#scroller").stop().animate({
        "marginTop": ($(window).scrollTop()) + "px", 
        "marginLeft":($(window).scrollLeft()) + "px"
        }, 100 );
     }

    });
    function getIsInArea(){

    var w = $(window).scrollTop();
        var p = $('#section-bbb').position();
      var top = p.top;
      var down = top+$('#section-bbb').innerHeight();
      if(w>=top && w<=down) {
        return true
      }

      return false;


    }
  });
})(jQuery);

Expect goes near you need it

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download