这就是我想要完成的事情:
我需要一个与div右侧相距一定距离的按钮,无论视口大小如何,它都与div侧面的距离相同,但会随窗口滚动.
所以它始终是div右侧的x像素,但始终是视口顶部的y像素.
这可能吗?
我有一个div.scroll_fixed与以下CSS
.scroll_fixed {
position:absolute
top:210px
}
.scroll_fixed.fixed {
position:fixed;
top:0;
}
Run Code Online (Sandbox Code Playgroud)
当div到达页面顶部时,我正在使用以下jQuery代码来设置.fixed类.
var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0));
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, ad the fixed class
$('.scroll_fixed').addClass('fixed');
} else {
// otherwise remove it
$('.scroll_fixed').removeClass('fixed');
}
});
Run Code Online (Sandbox Code Playgroud)
这适用于垂直滚动固定.但是对于一个小的浏览器窗口,水平滚动会导致与此固定div右侧的内容发生冲突.
我希望div能够水平滚动内容.
任何人都可以指出我正确的方向.还在用JS/JQuery弄湿我的脚.
我基本上希望它像本例中的第二个框一样工作.