jQuery - 如何使固定的div在垂直滚动后水平滚动 [英] jQuery - how to make a fixed div scroll horizontally after scrolling vertically

问题描述

这是以下的一种变化，但有点不同：如何获得固定位置div与内容水平滚动？使用jQuery。

This is kind of a variation of the following, but a little different: How do I get a fixed position div to scroll horizontally with the content? Using jQuery.

这是我的变体： http：// jsfiddle。 net / Bdwc4 /

基本上，我想在div的最右边看到x，为了做所以，div必须是绝对的。但在同一时间，我需要的div是垂直滚动时固定。换句话说，你应该总是能够看到x在固定位置，同时垂直或水平滚动。它是做什么我想要它做，但只有当你在窗口的顶部。

Basically, I would like to be able to see that "x" on the far right of the div, and in order to do so, the div must be absolute. But at the same time, I need the div to be fixed when scrolling vertically. In other words, you should always be able to see the "x" in that fixed position, while scrolling vertically or horizontally. It kind of does what I want it to do, but only when you're at the top of the window. I'd like to be able to scroll horizontally, regardless of where you scroll vertically.

如果你选择不使用上面的jsfiddle，这里是我使用的代码：

If you choose not to use jsfiddle above, here is the code I'm using:

<style>
.scroll_fixed {
    left:500px;
    position:absolute
}
.scroll_fixed.fixed {
    position:fixed
} 
.x { float:right }

.foo { background-color: red; width: 150px; height:150px; left:500px }
body { width: 500px }
.header { margin-top: 100px }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(window).scroll(function(event) {
    var x = 0 - $(this).scrollLeft();
    var y = $(this).scrollTop();

    // whether that's below the form
    if (y) {
        // if so, ad the fixed class
        $('.scroll_fixed').addClass('fixed');
    } else {
        // otherwise remove it
        $('.scroll_fixed').removeClass('fixed');
    }  
});
</script>
<div class="header"></div>
<div class="scroll_fixed foo"><div class="x">x</div></div>
<div>
    Enter a very long string of text
</div>

输入代码后，水平和垂直缩小浏览器窗口，直到红框不在视图中，这将迫使您水平滚动以查看它，当您垂直滚动时，红框应处于固定位置。

After you enter in the code, shrink the browser window horizontally and vertically until the "x" in the red box is out of view, which will force you to scroll horizontally to see it, and while you scroll vertically, the red box should be in a fixed position.

推荐答案

看起来就是这样： http://css-tricks.com/ scrollfollow-sidebar /

这篇关于jQuery - 如何使固定的div在垂直滚动后水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！