我创建了一个移动网站帽子,屏幕两侧各有一个固定按钮。在向下滚动页面550像素后,按钮应该出现。
这是我网站的链接:http://www.unf.edu/~n00804716/adv-web/project01/stops/museum.html
正如您所看到的,链接在加载时出现,然后当您滚动最微小的位时,它们就会消失。然后,在出现550像素之后。因此,问题在于,当浏览器窗口显示时,它们加载太快。最好以小于640像素的浏览器宽度查看此页面,以获得我尝试创建的理想体验。
以下是我用于两个按钮的脚本:
$(window).scroll(function() {
if ( $(this).scrollTop() < 550) {
$("button.one").fadeOut(400);
} else {
$("button.one").fadeIn(400);
}
$(window).scroll(function() {
if ( $(this).scrollTop() < 550) {
$("button.two").fadeOut(400);
} else {
$("button.two").fadeIn(400);
}
先谢谢你们的帮助!
答案 0 :(得分:1)
使用.hide()
隐藏按钮。你不能淡化已存在的东西:http://jsfiddle.net/kv7L0c5d/17/
$(document).ready(function () {
$('button').hide();
$(window).scroll(function() {
if ( $(this).scrollTop() < 550) {
$("button").fadeOut(400);
} else {
$("button").fadeIn(400);
}
})
})