gpt4 book ai didi

jquery - 使侧边栏在页面滚动时保持粘性

转载 作者:太空宇宙 更新时间:2023-11-04 06:06:28 26 4
gpt4 key购买 nike

我试图让我的页面侧边栏在页面滚动时保持粘性。

我尝试了不同的解决方案,但它不起作用...

这是我最后一次尝试:

$( document ).ready(function() {
console.log( "document ready!" );

var $sticky = $('.sticky');
var $stickyrStopper = $('.sticky-stopper');
if (!!$sticky.offset()) { // make sure ".sticky" element exists

var generalSidebarHeight = $sticky.innerHeight();
var stickyTop = $sticky.offset().top;
var stickOffset = 0;
var stickyStopperPosition = $stickyrStopper.offset().top;
var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
var diff = stopPoint + stickOffset;

$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number

if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset });
} else {
$sticky.css({position: 'absolute', top: 'initial'});
}
});

}
});

这是我页面的源代码:https://codepen.io/anon/pen/bPareG

你们谁能帮帮我吗?

非常感谢。

最佳答案

正如 robinvrd 在评论中所推荐的那样,我会使用固定位置,因为它避免了计算新 Y 位置的麻烦(更好的说法是,浏览器会在内部处理这个问题)。因此,假设您希望粘性框滚动直到它到达视口(viewport)的末端,然后在侧面保持可见,这将是一个解决方案:

$(window).scroll(function() {
// scroll event
var windowTop = $(window).scrollTop(); // returns number

if (stickyTop < windowTop + stickOffset) {
$sticky.css({ position: "fixed", top: 0, right: 0 });
} else {
$sticky.css({ position: "absolute", top: "initial", right: 0 });
}
});

更改后的代码可以在提到的Codepen中找到.

关于jquery - 使侧边栏在页面滚动时保持粘性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56808798/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com