使用jquery將垂直導航更改爲水平

基本上，我有一個無序列表，充當我在按頁面排序的單頁網站上的導航。這些部分或面板是瀏覽器窗口的全部寬度和高度。使用jquery將垂直導航更改爲水平

在第一個面板中，此列表是垂直的，但是當用戶向下滾動頁面到第二部分時（即瀏覽器窗口頂部的第二個面板），我想改變它的樣式，使它修復了瀏覽器窗口的頂部，併成爲水平導航而不是垂直導航。如果可能，我不想複製列表。

我不擅長jQuery，不知道從哪裏開始。任何幫助都會很棒。

這是我當前的代碼獲取瀏覽器窗口的寬度和高度，並顯示一個全屏幕的div：

function fitElements(){ 
var height=$(window).height(); 
var width=$(window).width(); 
$('.panel').css('height',height); 
$('.panel').css('width',width) 
};

來源

2012-07-30 egr103

您可以發佈一切的一些代碼（的jsfiddle）你有這麼遠嗎？ – 2012-07-30 16:36:14

所以，爲了澄清，你基本上有一個側面導航欄，你希望這個導航欄跟隨你的用戶向下滾動頁面，右（僅水平）？ – 2012-07-30 16:36:30

這裏是一個非常簡單的例子：

DEMO

HTML：

<ul id="nav"> 
<li><a href="#" id="linkOne">One</a></li> 
<li><a href="#" id="linkTwo">Two</a></li> 
<li><a href="#" id="linkThree">Three</a></li> 
</ul> 

<div id="divOne" class="panel">  
</div> 
<div id="divTwo" class="panel">  
</div> 
<div id="divThree" class="panel">  
</div>

CSS：

#nav { 
position:fixed; 
top:0; 
left:10px;  
} 

#nav.horizontal li { 
    float:left; 
} 

#divOne { 
background-color:#cef; 
} 
#divTwo{ 
background-color:#efc; 
} 
#divThree{ 
background-color:#fce; 
}

個JS/jQuery的：

$("div.panel").css({ 
    height: $(window).height(), 
    width: $(window).width() 
}); 

$(window).scroll(function() { 
    ($("#divTwo").offset().top <= window.pageYOffset) ? $("#nav").addClass("horizontal") : $("#nav").removeClass("horizontal"); 
}); 

$("#linkOne").click(function(e){ 
    $('html, body').animate({ 
     scrollTop: $("#divOne").offset().top 
    }); 
    $("#nav").removeClass("horizontal"); 
    e.preventDefault(); 
}); 

$("#linkTwo").click(function(e){ 
    $('html, body').animate({ 
     scrollTop: $("#divTwo").offset().top 
    }); 
    $("#nav").addClass("horizontal"); 
    e.preventDefault(); 
}); 

$("#linkThree").click(function(e){ 
    $('html, body').animate({ 
     scrollTop: $("#divThree").offset().top 
    }); 
    $("#nav").addClass("horizontal"); 
    e.preventDefault(); 
});

來源

2012-07-30 16:57:26 kei

很好的解決方案，但請不要使用'return false'。看看這篇文章：http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/ – 2012-07-30 17:03:36

@kei：我不認爲這會幫助他很多，考慮到他說他是一個jQuery新手，他將基本上從頭開始他的想法。你所做的只是說明他想做什麼（使垂直列表水平）而沒有任何效果，動作或任何事情的基本想法。另外，如果他走上了這條路線，那看起來會很糟糕，因爲即使他能夠實現它的效果，他仍然沒有jQuery技能來平滑效果。 – 2012-07-30 17:04:10

好的解決方案，但根據這個問題，它需要一個小的更正 - 從onclick到onscroll：http：// jsfiddle。net/bbYZS/2/ – Stano 2012-07-30 17:35:23

好吧，提供我理解正確的話，你（看到我的評論在尋找澄清），您的目標是確保您的導航窗格對您的網站訪問者可見，即使他們向下滾動頁面。除非（有時甚至是）您提供了更多的代碼（對於一個複雜的代碼），否則我會提醒您不要將導航欄更改爲在頁面上的某個點後水平顯示，因爲它看起來會非常不穩定，尤其是在較慢的瀏覽器中新手）來平滑過渡。

我建議你幾天前看看this question。我爲他尋找的效果創建了一個演示，這與您正在尋找的內容非常相似，並將其託管在我的開發站點上。看看，如果它是你喜歡的東西，如果它是，並且你實施時遇到困難，讓我知道，我會很樂意幫助你。

來源

2012-07-30 16:43:25

使用jquery將垂直導航更改爲水平

回答

相關問題