爲什麼固定div在水平滾動時出現？

我已經在這個小提琴中演示了這個問題：http://jsfiddle.net/pda2yc6s 爲什麼固定div在水平滾動時出現？

在垂直滾動div變得粘滯。當窗口小於包裝寬度時，水平滾動會使其粘貼到其父div上。

這裏是CSS：

div#wrapper { 
    background-color: #ffffff; 
    margin: 0 auto; 
    width: 1058px; 
} 
div#mainContent { 
    float: left; 
    width: 728px; 
} 
div#sideBar { 
    float: right; 
    width: 300px; 
} 
.stick { 
    background-color: #ffffff; 
    border-bottom: 1px solid; 
    position: fixed; 
    top: 0; 
    height: 46px; 
    width: 728px; 
}

此JavaScript使粘工作：

$(document).ready(function() { 
    var s = $("#mainContent h1"); 
    s.wrap('<div class="sticky-wrapper"></div>'); 
    var pos = s.position(); 
    var t = $('.sticky-wrapper'); 
    $(window).scroll(function() { 
     var windowpos = $(window).scrollTop(); 
     if (windowpos >= pos.top) { 
      t.height(46); 
      s.addClass("stick"); 
     } else { 
      t.removeAttr('style'); 
      s.removeClass("stick"); 
     } 
    }); 
});

爲什麼是這個樣子這個粘性能如何？如何解決它？

來源

2015-11-24 g13

[「* ...對於固定位置的盒子，包含塊由視口建立... *」]（http://www.w3.org/TR/css3-positioning/#fixed -pos） – Abhitalks

只是想知道，爲什麼不花費你的努力，只是簡單地使網站更適應狹窄的屏幕（而不是試圖做一個難看的水平滾動側邊欄不那麼醜陋）？ – thedarklord47

@ g13預期將'.stick'元素'width'的結果設置爲視口的100％，超過側邊欄？，或側邊欄右側顯示在'.stick'上。 – guest271314

首先第一件事情：

每http://www.w3.org/TR/css3-positioning/#fixed-pos

...對於固定定位框，包含塊由視成立...

所以，你不能有一個元素fixed，並在同一時間保持在其直接父內限制。

從同樣的參照：

對於連續介質，固定框不移動時該文件是滾動

其中，裝置滾動時，fixed元素根本不會移動。垂直或水平。

現在，您面臨的問題是，您有一個寬度大於視口的頁面，因此會觸發水平滾動。雖然，您的粘性（fixed）div的寬度與主要的div的寬度相同，但它在水平滾動時不會移動，因此隨着您的內容從它下面左移，它將越來越多地覆蓋側邊欄。

如果你不想調整你的標記，以保持視口寬度內的所有內容（以免造成橫向滾動），那麼你需要爲你滾動到手動更改left屬性。

您已經擁有窗口滾動的事件偵聽器。在那添加一些代碼來更改left屬性。就像這樣：

$(window).scroll(function() { 
    ... 
    var winleft = $(window).scrollLeft(); 
    if (windowpos >= pos.top) { 
     ... 
     s.css({'left': -(winleft)}); 
...

這是你撥弄以上所結合：http://jsfiddle.net/abhitalks/pda2yc6s/6/

什麼，你會做的是用相同量的滾動水平距離，有效地改變left屬性。這將保持您的fixed粘貼div在您的主div內容的頂部，而不包括側邊欄。

注意：這是醜陋的。您可能想重新考慮您的標記和設計。

。

來源

2015-11-24 07:04:16 Abhitalks

改變你的CSS是這樣的：

div#sideBar 
{ 
    float: right; 
    width: 300px; 
    z-index:1; 
    position: relative; 
} 

.stick 
{ 
    background-color: #ffffff; 
    border-bottom: 1px solid; 
    position: fixed; 
    top: 0; 
    height: 46px; 
    width: 728px; 
    z-index:0; 
}

側邊欄（也相對現在的位置）設置更大的z-index使該棍元素將被邊欄重疊。我想這就是你想要的效果。我更新了你的小提琴http://jsfiddle.net/pda2yc6s/2/

來源

2015-11-24 06:38:15 xxxmatko

由於位置的CSS：

你給位置固定，這樣它的行爲像粘。

變化成

.stick { 
    background-color: #ffffff; 
    border-bottom: 1px solid; 
    position: static; 
    top: 0; 
    height: 46px; 
    width: 728px; 
}

的有關排名是指這個

http://learnlayout.com/position.html

來源

2015-11-24 06:41:41

你還沒有理解我的問題。 – g13

嘗試：

html, body { 
    margin: 0; 
    padding: 0; 
} 
body { 
    background-color: #dddddd; 
    color: #444444; 
    font-size: 13px; 
    line-height: 18px; 
} 
div#wrapper { 
    background-color: #ffffff; 
    margin: 0 auto; 
    width: 100%; 
} 
div#mainContent { 
    float: left; 
    width: 60%; 
} 
div#sideBar { 
    float: right; 
    width: 40%; 
} 
.clear { 
    clear: both; 
} 
h1 { 
    line-height: 1.6em; 
    margin: 0 auto; 
} 
.box { 
    width: 300px; 
    height: 600px; 
    background-color: #aaaaaa; 
} 
.stick { 
    background-color: #ffffff; 
    border-bottom: 1px solid; 
    position: fixed; 
    top: 0; 
    height: 46px; 
    width: 60%; 
}

http://jsfiddle.net/pda2yc6s/4/

來源

2015-11-24 06:45:48 madalinivascu

我想用固定寬度的div進行工作 – g13

這是因爲固定的左邊是從屏幕左邊算起而不是左邊的文件。所以，即使粘頭和它的父div有728px寬度，它們不會在同一點結束。

如果不需要水平滾動，則應該使內容適合於無水平滾動佈局，否則必須在每次水平滾動更改時重新計算粘滯標題的左側位置。

讓我知道如果你需要一個小提琴

編輯

http://jsfiddle.net/dango_x_daikazoku/g589jk0v/1/

 var left = $("body").scrollLeft(); 

     s.css("left", -left + "px");

來源

2015-11-24 07:00:21

感謝您的洞察力Aman在媒體查詢更改包裝寬度大於768px（平板電腦和桌面屏幕）時發揮了水平滾動的作用。這使封裝寬度固定。 – g13

看到我的編輯可能的解決方案，但你也可以去尋找一個響應式的網站佈局解決方案，像twitter引導更安全 –

只值改爲現在的位置是絕對的「.stick」類css文件像

`postion:absolute;`

！它的工作原理

來源

2015-11-24 07:13:37

爲什麼固定div在水平滾動時出現？

回答

相關問題