固定在水平滚动条的左侧

Question

当用户向下滚动时，我的导航栏固定在页面顶部。当用户水平滚动时，我还需要将它固定在右侧块的左上角。这该怎么做？感谢您的任何建议。

CSS:

#box {
   margin: 0 auto;
}

#content {
   height: 500px;
   width: 1000px;
}

#left {
   max-width: 20%;
   display: inline-block;
   background: #aaa;
}

#right {
   max-width: 80%;
   display: inline-block;
   background: red;
   height: 100%;
   width: 100%;
}

nav {
   position: fixed;
   top: 0;
   height: 50px;
   background: #666;
}

HTML:

<div id="box">
    <div id="content">
        <div id="left">LEFT</div>
        <div id="right">
            <nav>
               Some text        
            </nav>
            RIGHT
        </div>
    </div>
</div>

jsfiddle 在这里：https://jsfiddle.net/deguac8y/

Answer 1

您可以使用 jQuery 检测水平滚动，使用 class 您可以在检测到水平滚动时在固定位置导航和绝对位置导航之间切换，而不会丢失当前滚动位置。

JSFiddle

$(document).ready(function (){
    var detectScroll = 0;
    $(window).scroll(function () {
        var documentScrollLeft = $(document).scrollLeft();
        if (detectScroll != documentScrollLeft) {
            detectScroll = documentScrollLeft;
            $('nav').addClass('notFixed');
            var scrollTop = $(window).scrollTop();
            $('nav').css('top',scrollTop);  
        } else {
            $('nav').removeClass('notFixed');
            $('nav').css('top','auto');  
        }
    });
});

body {
    margin:0
}
#box {
    margin: 0 auto;
}
#content {
    height: 500px;
    width: 1000px;
}
#left {
    max-width: 20%;
    display: inline-block;
    background: #aaa;
}
#right {
    max-width: 80%;
    display: inline-block;
    background: red;
    height: 100%;
    width: 100%;
}
nav {
    position: fixed;
    height: 50px;
    background: #666;
}
nav.notFixed {
    position:absolute;
    top:auto;
    left:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box">
    <div id="content">
        <div id="left">LEFT</div>
        <div id="right">
            <nav>Some text</nav>RIGHT</div>
    </div>
</div>

固定在水平滚动条的左侧

Fixed to left on horizontal scroll

css

fixed