使用水平滾動將絕對位置從絕對值更改爲固定值

Question

我有一個網站使用橫向滾動插件在https://github.com/brandonaaron/jquery-mousewheel上進行水平滾動。那裏沒有問題。

我的問題是，我有一個250px寬的div，100％的高度從屏幕右側開始100px。當我滾動（水平）時，div向左滾動並最終從屏幕上消失。 div的Position設置爲Absolute。我想要的是一旦div擊中瀏覽器窗口的左側，div就會固定在屏幕的左側。

我猜我需要使用JS來更改div的CSS，一旦它到達屏幕上的特定位置（最左）。我見過不少網站通過垂直滾動來實現這一點，在屏幕頂部觸摸頂部時，菜單欄就會固定。菜單可能已經開始在頁面的中間並且在滾動上向上移動。我只是想在水平面上達到同樣的效果。

我對代碼一般都比較陌生，並且是全新的Javascript。我可能會咬掉更多，但我喜歡挑戰。感謝任何人的幫助。

的CSS代碼，我會改變是

#header { 
    width: 250px; 
    background: rgba(22,22,22,.85); 
    height: 100%; 
    position: absolute; 
    margin-left: calc(100% - 350px); 
    z-index: 999; 
} 

然後換

#header { 
    width: 250px; 
    background: rgba(22,22,22,.85); 
    height: 100%; 
    position: fixed; 
    margin-left: 0px; 
    z-index: 999; 
} 

Answer 1

這是我嘗試按我從你的問題理解... N啊，我有用戶的JavaScript ..

HTML：

<div id="headerSlideContainer"> 

    <div id="headerSlideContent"> 

     Header content goes here! 

    </div> 
    <div id="new"> 
     Other Contents 
    </div> 

</div> 

CSS：

#headerSlideContainer { 
    position: absolute; 

    top:0px; 
    width: 100%; 

    height:1000px; 
    background: black; 
} 
#headerSlideContent { 
    width: 250px; 
    background-color:red; 
    height: 100%; 
    position: fixed; 
    margin-left: 0px; 
    z-index: 999; 
} 

#new{ 
    top:60px; 
    z-index:2; 
    height:100px; 
    background:Orange; 
    position:absolute; 
    color: white; 

} 

和JS：

$(function() { 

    var bar = $('#headerSlideContainer'); 
    var top = bar.css('top'); 
    $(window).scroll(function() { 

     if($(this).scrollright() > 100) { 
      bar.stop().animate({'top' : '5px'}, 500); 
     } else { 
      bar.stop().animate({'top' : top}, 500); 
     } 
    }); 
}); 

變化是scrollright量需要。如果scrollright不工作，然後嘗試scrollleft（）..讓我知道如果您有任何概率..

Answer 2

這是一篇文章，解釋如何垂直做這件事，但同樣的概念也適用於你的情況。

教程：http://jqueryfordesigners.com/fixed-floating-elements/

演示：http://jqueryfordesigners.com/demo/fixedfloat.html