gpt4 book ai didi

javascript - 位置固定,但在 上滚动

转载 作者:行者123 更新时间:2023-11-28 08:22:55 24 4
gpt4 key购买 nike

我有这种情况:

  • 我正在创建的网站有一个左侧边栏,必须将其设置为 100%,同时滚动网页,其中的内容肯定超过 1000px 高度。
  • 由于内容的高度,我在这个侧边栏元素上得到了垂直滚动,当我的内容有足够的内容时,我得到了这个部分的另一个滚动。

我要做的是以某种方式从“固定”元素转移、滚动到主页面滚动...

希望你能理解我...

我希望这张截图,也能帮助你理解我的问题:

link

预先感谢您的回答。

最佳答案

你的问题引起了我的兴趣,所以我试了一下。

您可以像这样设置侧边栏:

#sidebar{
position:fixed;
min-height:100%;
top:0;
left:0;
/* ... */
}

现在,为了让它滚动,我们可以使用它的 margin-top css 属性:

  • 如果我们向下滚动,我们递减它,除非我们滚动超过它高度。
  • 如果我们向上滚动,我们会递增它,除非它大于零。

我创建了一个包含 2 个函数的 ScrollingSidebar 类来处理这个问题:

// ScrollingSidebar class
// Define some variables and bind events
function ScrollingSidebar(el){
this.sidebar = el;
var that = this;
that.updateVariables();
document.addEventListener('scroll',function(){that.scrollSidebar();});
window.addEventListener('resize',function(){that.updateVariables();});
}

// Updates variables used for calculation
ScrollingSidebar.prototype.updateVariables = function(){
this.height = parseInt( getComputedStyle(this.sidebar).height );
document.body.style.minHeight = this.height + 'px';
this.winHeight = parseInt( window.innerHeight );
this.previousScrollPos = Math.floor( document.body.scrollTop ||
document.documentElement.scrollTop ||
document.body.parentNode.scrollTop
);
this.scrollSidebar();
};

// Updates the sidebar's margin-top
ScrollingSidebar.prototype.scrollSidebar = function(){
var curScrollPos = Math.floor( document.body.scrollTop ||
document.documentElement.scrollTop ||
document.body.parentNode.scrollTop
);
if(this.previousScrollPos < curScrollPos){
this.sidebar.style.marginTop = - Math.min(-parseInt( getComputedStyle(this.sidebar).marginTop ) + (curScrollPos - this.previousScrollPos),
this.height-this.winHeight) + 'px';
} else {
this.sidebar.style.marginTop = Math.min(0,parseInt( getComputedStyle(this.sidebar).marginTop ) + this.previousScrollPos-curScrollPos) + 'px';
}
this.previousScrollPos = curScrollPos;
};

你可以这样使用它:

// Create an instance of ScrollingSidebar
var sidebar = document.getElementById('sidebar');
var x = new ScrollingSidebar(sidebar);

JS Fiddle Demo (with a small amount of content)

JS Fiddle Demo (with a lot of content)

注意:我没有花时间很好地评论我的代码,但如果您对此有任何疑问或有任何问题,请随时提问。

如果您的网站是响应式的,并且您不希望在小屏幕上使用此方法,您可能需要考虑使用条件来禁用它。

关于javascript - 位置固定,但在 <body> 上滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28664217/

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