水平滚动固定在左侧

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 here：https://jsfiddle.net/deguac8y/

Answer 1

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

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>