scrollToFixed - 奇怪的滾動發行

我試圖做一個簡單的固定，而滾動與ScrollToFixed，但我已經遇到了一些怪異的行爲scrollToFixed - 奇怪的滾動發行

我已經準備了jsfiddle顯示了下列問題：

HTML ：

<div class="row-fluid"> 
    <div id="car_left_col" class="span2">left</div> 
    <div id="car_center" class="span8"> 
     <div class="car_main thumbnail"> 
      <div class="car_cover"> 
       <img alt="" src="http://www.autopulze.com/wp-content/uploads/2012/07/Rolls-Royce-Silver-Ghost-the-Best-Car-in-the-World.jpg"> 
      </div> 
      <hr> 
      <div class="car_page_creator"></div> 
     </div> 
     <div class="car_talk">here are the comments for the car</div> 
    </div> 
    <div id="car_right_col" class="span2"> 
     <div class="car_vote test_fixed">I should not move</div> 
    </div> 
    <div class="long"></div>

CSS：

.long { 
    height: 10000px; 
} 
#car_right_col { 
    position: relative; 
} 
.car_main { 
    position: relative; 
    padding: 0; 
} 
.car_cover { 
    width: 100%; 
    position: relative; 
} 
.car_cover img { 
    width: 100%; 
} 
.test_fixed { 
    position: static; 
} 
.car_vote { 
    position: relative; 
}

個JS：

$(document).ready(function() { 
    $('.test_fixed').scrollToFixed({ 
     marginTop: 45, 
     limit: $('.car_page_creator').offset().top 
    }); 

});

滾動一路下來的時候，看到一個水平滾動條，可笑的拉伸頁面右邊
我認爲這是與第一個問題做的，該項目是固定，.test-fixed，有一個非常大的left屬性時，向下滾動
（從一路下跌）通過點擊向上滾動時保持滾動條，一旦它到達固定的項目來看，它只是不正常

我認爲我的html和css幾乎沒有什麼特別的標準..這是由於我的代碼或插件中的錯誤？

來源

2013-06-03 Nick Ginanto

我無法重現該行爲。 – howderek

嘗試用這個全屏http://jsfiddle.net/guyisra/kspA8/2/embedded/result/ - 請注意，有2個滾動條，所以水平是可見的最底部 –

我看，這是很奇怪的。 – howderek

我已經打開的問題在github，我必須說，反應很快

解決方案是去除元素.test-fixed外面的右列，並使其與中心div的水平相同

來源

2013-06-04 08:50:42

完美！很高興你把事情解決了。 – blend

這是我在stackoverflow上的第一個答案，所以我不知道如果我這樣做是正確的=）。

我禁用了您用於使'我不應該'移動div的右側和頂部45px的JavaScript。你只能用css輕鬆做到這一點。使用位置固定並給予div一個保證金最高。

第二個問題是你試圖修復div的孩子。父母仍然是相對的。

用這段代碼替換原來的#car_right_col。希望它適用於你！

#car_right_col { 
    margin-top:45px; 
    position: fixed; 
    right:0px; 
}

編輯：如果我只是粘貼修改後的小提琴url將它的工作？ =）http://jsfiddle.net/kspA8/16/

Edit2：我剛剛簽出了ScrollToFixed插件演示。似乎你可能需要一個不同的答案..對不起！

來源

2013-06-03 15:31:44 Sapulidi

不......只應保持固定，直到到達目標元素。 – blend

我後來想到了。猜猜我沒有完全理解你的問題。混合提供的答案似乎工作！ =） – Sapulidi

我已經更新了你搗鼓你：

http://jsfiddle.net/kspA8/17/embedded/result/

.test_fixed { 
    position: static; 
    left: auto !important; 
}

應用自動留下財產給您的上下文元素似乎已經解決了它：）

來源

2013-06-03 15:34:51 blend

這確實在jsfiddle中工作，但對我來說非常不合適，它在真實網站中不起作用。我添加了解決方案 –

'left：auto！important;'爲我工作。 +1 – REMESQ

scrollToFixed - 奇怪的滾動發行

回答

相關問題