只在某个地方制作带有页面的div滚动？

Question

How can it be made so that a div scrolls with the page but only in a certain area of the page?

I can't work out how to do this with CSS for only part of the page, I think javascript may be the only option.

For eg There's three sections of a page, Top , Middle and Bottom .

There's a right floated div which should scroll with the user in the middle section and stop scrolling to be 'left in place' at the top of the middle section as well as the bottom of the middle section.

 #Top { background-color: grey; width: 100%; height: 400px; } #Middle { background-color: green; width: 100%; height: 800px; } #Bottom { background-color: blue; width: 100%; height: 400px; } #scrolling-section { background-color: yellow; width: 30%; height: 150px; float: right; } 

 <div id="Top"> </div> <div id="Middle"> <div id="scrolling-section"> This box should scroll along the green section but 'cut-off' and stop scrolling at the top and bottom of the green section </div> </div> <div id="Bottom"> </div> 

JSFiddle: fiddle

Answer 1

So here you have solution using jquery:

1. Listen to the scroll event and calculate how much the scrolling-section goes outside the Middle section while scrolling up / down.

2. Added position: relative to the scrolling-section .

3. Adjust the position of the scrolling-section accordingly.

 $(document).scroll(function() { var wrapper = $('#Middle'); var box = $('#scrolling-section'); var offsetTop = - wrapper.offset().top + $(window).scrollTop(); var offsetBottom = wrapper.offset().top - $(window).scrollTop() + wrapper.outerHeight() - box.outerHeight(); if (offsetBottom > 0 && offsetTop < 0) { box.css({ 'top': 0 }); } else if (offsetBottom > 0 && offsetTop > 0) { box.css({ 'top': offsetTop + 'px' }); } else { box.offset({ 'top': $(window).scrollTop() + offsetBottom }); } }); 

 #Top { background-color: grey; width: 100%; height: 400px; } #Middle { background-color: green; width: 100%; height: 800px; } #Bottom { background-color: blue; width: 100%; height: 400px; } #scrolling-section { position: relative; background-color: yellow; width: 30%; height: 150px; float: right; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="Top"> </div> <div id="Middle"> <div id="scrolling-section"> This box should scroll along the green section but 'cut-off' and stop scrolling at the top and bottom of the green section </div> </div> <div id="Bottom"> </div> 

Let me know your feedback on this. Thanks!

Answer 2

Some Javascript is needed in order to read the point where you want to change the state of the div you wish to address. You can do this with the getBoundingClientRect() method. I have worked out a fiddle that will show you. What happens is that you read the position of #Middle. I have added an input field that shows you the value. The change will be when the position hits zero. You then change the CSS properties of the #scrolling-section.

You will see some added readings of the element to ensure that it can be positioned in place and will keep its original width;

 var scrollposition = document.getElementById("Middle"); var scrollsection = document.getElementById("scrolling-section"); var scrollsection_offsetLeft = scrollsection.offsetLeft; var scrollsection_width = scrollsection.offsetWidth; var valy = document.getElementById("posy"); window.addEventListener("scroll", function(event) { valy.value = scrollposition.getBoundingClientRect().y || scrollposition.getBoundingClientRect().top; if (valy.value <= 0) { scrollsection.style.position = "fixed"; scrollsection.style.top = "0px"; scrollsection.style.left = scrollsection_offsetLeft + "px"; scrollsection.style.width = scrollsection_width + "px"; } else { scrollsection.style.position = "static"; scrollsection.style.top = "auto"; scrollsection.style.left = "auto"; } }, false) 

 #posy { position: fixed; top: 0; } #Top { background-color: grey; width: 100%; height: 400px; } #Middle { background-color: green; width: 100%; height: 800px; } #Bottom { background-color: blue; width: 100%; height: 400px; } #scrolling-section { background-color: yellow; width: 30%; height: 150px; float: right; } 

 <input type="text" id="posy" /> <div id="Top"> </div> <div id="Middle"> <div id="scrolling-section"> This box should scroll along the green section but 'cut-off' and stop scrolling at the top and bottom of the green section </div> </div> <div id="Bottom"> </div> 

Answer 3

I'm on my mobile but if you add

#scrolling-section {
  position: fixed;
  background-color: yellow;
  width: 30%;
  height: 150px;
  right: 8px;
}

This will scroll with the page but really there will need to be an event listener that will trigger when #scrolling-section appears on the screen possibly adding the attribute position:fixed; then another event listener when the #bottom appears calculates the size of #middle set margin-top & position:absolute; hope this helps point in the right direction.