使用Wordpress Twenty Eleven主題的浮動導航菜單

我目前正在開發一個使用WordPress Twenty Eleven主題的網站，並且我希望主滾動條一直滾動到屏幕頂部，就像該頁面右側的段落http://fiddle.jshell.net/zsJAr/show/light/。使用Wordpress Twenty Eleven主題的浮動導航菜單

到目前爲止，我已經在標題中添加的代碼只是開幕頭標記後，包括jQuery的：

<?php wp_enqueue_script("jquery"); ?>

後來我已經包括結束標記前面我的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的經驗不多，我真的很感謝在這個問題上的一些幫助。有沒有人有任何想法如何去做這件事？

來源

2012-03-14 nihilo90

你也可以考慮張貼在http://wordpress.stackexchange.com/ – nrabinowitz 2012-03-14 16:36:32

啊，謝謝沒有意識到:) – nihilo90 2012-03-14 18:19:30

所以看起來這可能是不可能的，或者它太複雜了。沒有人知道這個關於WordPress的堆棧交換或WordPress論壇，所以我不得不放棄它:(

來源

2012-03-27 13:16:10 nihilo90

如果你使用的是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}); 
});

希望它有幫助！

來源

2012-03-14 16:43:37 TheBronx

使用Wordpress Twenty Eleven主題的浮動導航菜單

回答

相關問題