只在某個地方製作一個div頁面滾動頁面？

如何製作一個div讓頁面滾動，但只在頁面的某個區域滾動？只在某個地方製作一個div頁面滾動頁面？

我不能解決如何使用CSS做到這一點只有一部分的頁面，我認爲JavaScript可能是唯一的選擇。

例如，有一頁的三個部分，頂部,中間和底部。

有一個正確的浮動DIV應該在中間部分用戶滾動和停止滾動的中間部分的頂部還有中間部分的底部被「留在原地」。

#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

來源

2016-09-24 Matt B

嗨，你將需要JavaScript，如果你正在使用Bootstrap有afix這是在javascript部分下，否則你將需要可能的代碼自定義。 –

所以在這裏你必須解決使用jQuery：

聽scroll事件並計算scrolling-section多少那張Middle節之外，同時滾動向上/向下。
將添加到scrolling-section。
相應地調整scrolling-section的位置。

$(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>

讓我知道你對這個意見。謝謝！

來源

2016-09-24 05:25:16 kukkuz

非常感謝。完美工作。 –

一些JavaScript代碼是必要的順序讀取，你想改變你想解決的div狀態的時間點。你可以用getBoundingClientRect()方法做到這一點。我已經制定了一個小提琴，會告訴你。發生什麼事是你讀了＃中號的位置。我添加了一個顯示您的值的輸入字段。這個變化將會發生在位置達到零的時候。然後，您更改＃滾動部分的CSS屬性。

您會看到一些元素的增加讀數，以確保它可以定位並保持其原始寬度;

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>

來源

2016-09-24 04:46:03 Daniel

非常感謝。 –

我在我的手機，但如果添加

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

這將滾動頁面，但確實有將需要一個事件偵聽器將觸發時屏幕上出現＃滾動部分可能添加屬性位置：固定;那麼當#bottom出現時另一個事件監聽器計算#middle設置的邊界頂部的大小& position：absolute;希望這有助於指向正確的方向。

來源

2016-09-24 04:46:10

只在某個地方製作一個div頁面滾動頁面？

回答

相關問題