[英]Floating navigation menu using Wordpress Twenty Eleven theme
我目前正在開發一個使用WordPress 21主題的網站,並且希望將主導航欄滾動到屏幕頂部之后,就像此頁面右側的段落http: //fiddle.jshell.net/zsJAr/show/light/ 。
到目前為止,我已經在標題中添加了代碼,以在開始head標簽之后添加jQuery:
<?php wp_enqueue_script("jquery"); ?>
后來我在關閉head標簽之前加入了我的javascript:
<script type="text/javascript"
src="<?php bloginfo("template_url"); ?>/js/moveScroller.js"></script>
moveScroller.js的內容為:
var $j = jQuery.noConflict();
$j(window).load(function(){
$j(function() {
var a = function() {
var b = $j(window).scrollTop();
var d = $j("#access-anchor").offset({scroll:false}).top;
var c=$j("#access");
if (b>d) {
c.css({position:"fixed",top:"0px"})
} else {
if (b<=d) {
c.css({position:"relative",top:""})
}
}
};
$j(window).scroll(a);a()
});
});
在以下塊中進一步聲明了“ access”和“ access-anchor” ID:
<div id="access-anchor"></div>
<nav id="access" role="navigation">
<h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
<div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
<div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #access -->
這似乎沒有任何作用,我也不十分確定該怎么做。 以使用WordPress的經驗很少,我真的很感謝在此方面的一些幫助。 有誰知道如何解決這個問題?
如果您使用的是jQuery,還可以使滾動動畫,看起來更有趣=)我在幾周前使用了這段代碼,它不使用固定位置,它使用margin-top,但是您可以輕松更改它:
var scroll = 0; //initially scroll is 0
var marginTop = 10; //we add an initial margin
$(window).scroll(function () {
//once the user scrolls, we calculate the new margin-top
marginTop = ($(document).scrollTop() - scroll) + marginTop;
//and we save the new amount of scroll, for the next time
scroll = $(document).scrollTop();
$("#divYouWantToMove").animate({"marginTop": marginTop+"px"}, {duration:500,queue:false} );
});
希望能幫助到你!
因此,似乎這不可能或太復雜了。 在WordPress Stack Exchange或WordPress論壇上沒人知道這一點,因此我將不得不放棄:(
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.