使div出现在wordpress的滚动中 [英] Make div appear on scroll in wordpress
问题描述
我似乎无法弄清楚这一点..我敢肯定这很简单.我的目标是一旦用户向下滚动一点,即可使填充实心的div从视口顶部向下滑动.我之前已经在基本页面中实现了此功能,但似乎无法使其在Wordpress中正常工作.这是我正在使用的代码:
I can't seem to figure this one out.. I'm sure it's something simple. My goal is to make a solid filled div slide down form the top of viewport once the user has scrolled down a bit. I've implemented this before in a basic page but I cannot seem to get it to work in wordpress. Here is the code I'm using:
<script type="text/javascript">
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 50) {
$('.slide').slideDown();
} else {
$('.slide').slideUp();
}
});
</script>
div位于顶部,css为:
The div is positioned at the top, the css is:
.slide {
display: none;
position: fixed;
top: 0;
width: 100%;
height: 50px;
background: rgba(255, 255, 255, 0.97);
z-index: 1;
}
当我删除显示时:不显示任何内容,因此我知道这与z-index无关.将脚本放在页脚中时我没有运气.有任何想法吗?谢谢!
When I remove display: none it displays, so I know this isn't an issue with the z-index. I had no luck when placing the script in the footer. Any ideas? Thanks!
推荐答案
有了这么多的信息,我猜这是由于WordPress使用noconflict造成的.
尝试像这样修改您的代码:
With this much info, my guess is this happens because of WordPress using noconflict.
Try modifying your code like that:
<script type="text/javascript">
jQuery(function($) {
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 50) {
$('.slide').slideDown();
} else {
$('.slide').slideUp();
}
});
});
</script>
这篇关于使div出现在wordpress的滚动中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!