我想创建一个菜单栏,当您向上和向下滚动屏幕时,该菜单栏保持垂直,但如果用户左右滚动,我希望菜单栏与其余内容一起左右移动。
例如,如果用户在主页上并决定向下滚动以阅读公告。我希望左侧菜单栏保持原位。但是假设用户放大了我们的网页,因此整个页面不适合屏幕。如果用户决定一直滚动到页面的右侧,我希望菜单栏与页面最左侧的其他内容一起消失。
有没有办法只用css做到这一点?
我想创建一个菜单栏,当您向上和向下滚动屏幕时,该菜单栏保持垂直,但如果用户左右滚动,我希望菜单栏与其余内容一起左右移动。
例如,如果用户在主页上并决定向下滚动以阅读公告。我希望左侧菜单栏保持原位。但是假设用户放大了我们的网页,因此整个页面不适合屏幕。如果用户决定一直滚动到页面的右侧,我希望菜单栏与页面最左侧的其他内容一起消失。
有没有办法只用css做到这一点?
I had a similar problem and I found some help and did some customizations for my own need. Check my code below:
CSS
#sidebar {
top:70px; // make it for your own
left: 0px; //make it for your own
position: absolute;
}
jQuery
var leftOffset = parseInt($("#sidebar").css('left'));
$(window).scroll(function() {
$("sidebar").css({
'left': $(this).scrollLeft + leftOffset
})
});