用CSS重新定位div

我想讓菜單欄自動從屏幕的頂部移動到屏幕的左側，向下滾動時，我想要菜單元素向下滑動到左側位置（如Macromedia中的補間動畫Flash）用CSS重新定位div

我已經嘗試了很多CSS代碼片段，但都沒有工作。這裏是JQuery的代碼來檢測滾動：

$(document).ready(function() { 
var stickyNavTop = $('.nav').offset().top; 

var stickyNav = function(){ 
    var scrollTop = $(window).scrollTop(); 

    if (scrollTop-500 > stickyNavTop) {  
     $('#nav').addClass('sticky'); 
     } else { 
     $('#nav').removeClass('sticky'); 
    } 
}; 
stickyNav(); 
$(window).scroll(function() { 
    stickyNav(); 
});

}）;

CSS：

.sticky { 
    position: fixed; 
    width: 250px; 
    margin-left: 50px; 
    margin-top: 200px; 
    left: 0; 
    top: 0; 
    transition: .4s ease-out; 
}

什麼dosnt工作在這裏的是，格只是閃爍左側（無滑動）。有沒有辦法用CSS來做到這一點？或者是否有任何插件允許我這樣做。 http://jsfiddle.net/h2ULn/18/

來源

2014-01-22 Ouerghi Yassine

我希望你這塊JS之前已經定義的變量'scrollTop'和'stickyNavTop' ，對？ – Joeytje50

是的，我做了..編輯 –

您正在混用用於導航的ID（＃）和類（。）選擇器。是class="nav"還是id="nav"？

，你沒有看到，轉變的最可能的原因是你沒有提供的瀏覽器瀏覽器特定的重載中，你正在測試：

.sticky { 
    position: fixed; 
    width: 250px; 
    margin-left: 50px; 
    margin-top: 200px; 
    left: 0; 
    top: 0; 
    -moz-transition: .4s ease-in; 
    -o-transition: .4s ease-in; 
    -webkit-transition: .4s ease-in; 
    transition: .4s ease-in; 
}

另一個可能的問題，您可以有，並且我無法驗證它沒有看到更多的代碼，是nav的樣式是不正確的，你在做什麼。你可能想要它也有position: fixed，它位於屏幕的某個地方。

我也不完全清楚您所期望的動畫。它應該從頂部飛入嗎？或從頂部和側面？它是否也調整了大小？所有在轉換前後都很常見的樣式應該在.nav的樣式表中，以及.sticky中轉換的樣式。

這裏是一個簡化的小提琴，顯示出從左側滑入一個div當你向下滾動頁面：http://jsfiddle.net/DacY8/1/

來源

2014-01-22 01:41:10 Grinn

謝謝你的回覆，是的，我有class =「nav」和id =「nav」，我只是現在試着在鉻上，所以我沒有打擾包括所有其他瀏覽器，什麼在這個例子中，你給我的確是我想要的，它是一個菜單導航，所以它在開始時是可見的，而且當你向下滾動導航時，也會滑向瀏覽器的左側。 –

@yassine_hell我更新了小提琴。這更接近你想要完成的事情嗎（或者它至少讓你足夠接近？） – Grinn

是的，謝謝，它非常接近，幫助我很多，謝謝。 –

用CSS重新定位div

回答

相關問題