1

我正在尝试创建一个“返回顶部”链接，当用户滚动过去某个点并在向上滚动回同一点后再次淡入和滑出时，该链接会从左侧淡入并滑出。

HTML：

<section id="banner"></section>
<nav id="fixed">
    <ul>
        <li id="top-link"><a href="#">Top</a></li>
        <li><a href="#">Nav 1</a></li>
        <li><a href="#">Nav 2</a></li>
        <li><a href="#">Nav 3</a></li>
        <li><a href="#">Nav 4</a></li>
    </ul>
</nav>
<section id="content"></section>

Javascript：

$(document).ready(function(){
    $("#top-link").hide();
});

$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() >= 300) {
            $('#top-link').fadeIn();
        } else {
            $('#top-link').fadeOut();
        }
    });
});

当您滚动超过 300 像素时，我可以让它淡入和淡出，但是正如您从这个示例http://jsfiddle.net/AFMxe/10/中看到的那样，当它淡入和淡出时，后续的 li 项目“弹出”到右侧。有没有办法让它在淡入淡出的同时平滑地滑过？

4

2 回答 2

2

http://jsfiddle.net/AFMxe/11/怎么样？我所做的一切都是添加几行 CSS：

#top-link {
position: absolute;
margin-left: 50px;
}

编辑：

新版本在这里：http: //jsfiddle.net/AFMxe/13/

我为其他每个列表项添加了“no-top-link”类（当然可以做得更好），并将 jQuery 淡入淡出功能更改为：

$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() >= 300) {
            $('#top-link').fadeIn();
            $('.no-top-link').animate({ marginRight: "12px" }, 1000 )
            // 1000 describes the time (in ms) the animation takes, change it as desired
        } else {
            $('#top-link').fadeOut();
        }
    });
});

编辑2： 以下功能应该是合适的

$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() >= 300) {
            $('#top-link').fadeIn();
            $('.no-top-link').animate({'marginRight': '12px'},{duration: 1000, queue: false});
        } else {
            $('#top-link').fadeOut();
            $('.no-top-link').animate({'marginRight': '20px'},{duration: 1000, queue: false});
        }


    });

问题解决方案：我忘了添加“队列”。

解释：

queue（默认值：true） 类型：Boolean 或 String 一个布尔值，指示是否将动画放置在效果队列中。如果为 false，动画将立即开始。从 jQuery 1.7 开始， queue 选项也可以接受一个字符串，在这种情况下，动画被添加到由该字符串表示的队列中。当使用自定义队列名称时，动画不会自动启动；你必须调用 .dequeue("queuename") 来启动它。（来源：http ://api.jquery.com/animate/ ）

完成的jsFiddle

于 2013-07-09T23:03:45.300 回答
0

尝试使用animate方法代替..

//FADE IN BACK TO TOP LINK

$(document).ready(function(){
    $("#top-link").css('opacity', '0');
});

$(function() {
    $(window).scroll(function() {
        if($(this).scrollTop() >= 300) {
            $('#top-link').animate({
                opacity : 1  
            },400);
        } else {
            $('#top-link').animate({
                opacity : 0  
            },400);
        }
    });
});

检查小提琴

否则，您始终可以使用该visibility属性而不是该display属性

于 2013-07-09T23:02:50.700 回答