- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我目前正在使用 WordPress Twenty Eleven 主题开发一个网站,我希望主导航栏在滚动后固定在屏幕顶部,就像这个右侧的段落一样页 http://fiddle.jshell.net/zsJAr/show/light/ .
到目前为止,我已经在 header 中添加了代码,以便在开头的 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 在以下 block 中进一步声明:
<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} );
});
希望对您有所帮助!
关于php - 使用 Wordpress Twenty Eleven 主题的 float 导航菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9706040/
我编写了一个简单版本的“Elevens”纸牌游戏,并希望根据以下标准进行一些修改: 您可以使用任意数量的卡片,最多 11 张。 带有梅花和黑桃花色的牌的值(value)为负值。 这是我为常规 Elev
这很具体,但我希望有人能看一看。 我有一个视频主题(来自 Press75),想在 Logo 区域下方添加一个漂亮的下拉菜单。 我将相关代码和 CSS(经过一些调整)复制到主题中,它在 FF、Chrom
我目前正在使用 WordPress Twenty Eleven 主题开发一个网站,我希望主导航栏在滚动后固定在屏幕顶部,就像这个右侧的段落一样页 http://fiddle.jshell.net/zs
我是一名优秀的程序员,十分优秀!