[英]How to make div fixed after you scroll to that div?
滾動到該div
后如何使div
保持固定? 我有一個在頁面后面的div
,您需要滾動到該div
。
如果我使用:
.divname {
position: fixed;
}
div
將在正常出現之前出現。 也許我需要的一個很好的例子是9gag上的第二個廣告。 如果您的屏幕分辨率足夠低,則在加載首頁后您將看不到該廣告,但在您向下滾動后,您會看到第二個廣告,並且在您向下滾動時它會保持不變。
現在只能使用 CSS,請參閱https://stackoverflow.com/a/53832799/1482443
如果有人需要 jQuery 方法,下面是幾年前發布的原始答案:
我知道這僅標記為 html/css,但您不能僅使用 css 來執行此操作。 最簡單的方法是使用一些 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'
});
}
});
這在 CSS3 中是可能的。 只需使用position: sticky
,如此處所示。
position: -webkit-sticky; /* Safari & IE */
position: sticky;
top: 0;
jquery函數最重要
<script>
$(function(){
var stickyHeaderTop = $('#stickytypeheader').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#stickytypeheader').css({position: 'fixed', top: '0px'});
$('#sticky').css('display', 'block');
} else {
$('#stickytypeheader').css({position: 'static', top: '0px'});
$('#sticky').css('display', 'none');
}
});
});
</script>
然后使用 JQuery 庫...
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
現在使用 HTML
<div id="header">
<p>This text is non sticky</p>
<p>This text is non sticky</p>
<p>This text is non sticky</p>
<p>This text is non sticky</p>
</div>
<div id="stickytypeheader">
<table width="100%">
<tr>
<td><a href="http://growthpages.com/">Growth pages</a></td>
<td><a href="http://google.com/">Google</a></td>
<td><a href="http://yahoo.com/">Yahoo</a></td>
<td><a href="http://www.bing.com/">Bing</a></td>
<td><a href="#">Visitor</a></td>
</tr>
</table>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
添加到@Alexandre Aimbiré
的答案 - 有時您可能需要指定z-index:1
以使元素在滾動時始終位於頂部。 像這樣:
position: -webkit-sticky; /* Safari & IE */
position: sticky;
top: 0;
z-index: 1;
<script>
if($(window).width() >= 1200){
(function($) {
var element = $('.to_move_content'),
originalY = element.offset().top;
// Space between element and top of screen (when scrolling)
var topMargin = 10;
// Should probably be set in CSS; but here just for emphasis
element.css('position', 'relative');
$(window).on('scroll', function(event) {
var scrollTop = $(window).scrollTop();
element.stop(false, false).animate({
top: scrollTop < originalY
? 0
: scrollTop - originalY + topMargin
}, 0);
});
})(jQuery);
}
嘗試這個 ! 只需將類 .to_move_content 添加到您的 div
它對我有用
$(document).scroll(function() {
var y = $(document).scrollTop(), //get page y value
header = $("#myarea"); // your div id
if(y >= 400) {
header.css({position: "fixed", "top" : "0", "left" : "0"});
} else {
header.css("position", "static");
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.