Question

我有这个代码，我曾帮助过：http://jsfiddle.net/spadez/2atkZ/embedded/result/

$(function () {

    var $select = $('#select');
    var $window = $(window);
    var isFixed = false;
    var init = $select.length ? $select.offset().top : 0;

    $window.scroll(function () {
        var currentScrollTop = $window.scrollTop();
        if (currentScrollTop > init && isFixed === false) {
            isFixed = true;
            $select.css({
                top: 0,
                position: 'fixed'
            });
            $('body').css('padding-top', $select.height());
        } else if (currentScrollTop <= init && isFixed === true) {
            isFixed = false;
            $select.css('position', 'relative');

            $('body').css('padding-top', 0);
        }
        //active state in menu
        $('.section').each(function(){
            var eleDistance = $(this).offset().top;
            if (currentScrollTop >= eleDistance) {
                var makeActive = $(this).attr('id');
                $('#select a').removeClass('active');
                $('#select a.' + makeActive).addClass('active');
            }
        });
    });

    $(".nav").click(function (e) {
        e.preventDefault();
        var divId = $(this).attr('href');
        $('body').animate({
            scrollTop: $(divId).offset().top - $select.height()
        }, 500);
    });



});

目前，当黄色条完全位于该部分内时，会定义秒数。我想这样做，当我点击黄色条上的一个部分去，黄色条位于它的顶部，而不是在它顶部。是否有一种简单而优雅的方法，同时仍然允许代码在位于其下方的部分设置活动状态。

Answer 1

这将完成工作：

<强> HTML

而不是锚点，请使用：

<span data-sec="#posting" class="nav posting">posting</span>
<span data-sec="#distribution" class="nav distribution">distribution</span>
<span data-sec="#application" class="nav application">applicantions</span>

<强> JS

$(function () {

    var $select = $('#select');
    var $window = $(window);
    var isFixed = false;
    var init = $select.length ? $select.offset().top : 0;

    $window.scroll(function () {
        var currentScrollTop = $window.scrollTop();
        if (currentScrollTop > init && isFixed === false) {
            isFixed = true;
            $select.css({
                top: 0,
                position: 'fixed'
            });
            $('body').css('padding-top', $select.height());
        } else if (currentScrollTop <= init) {
            isFixed = false;
            $select.css('position', 'relative');
            $('#select span').removeClass('active');
            $('body').css('padding-top', 0);
        } 


        //active state in menu
        $('.section').each(function(){
            var eleDistance = $(this).offset().top;
            if (currentScrollTop >= eleDistance-$select.outerHeight()) {
                var makeActive = $(this).attr('id');
                $('#select span').removeClass('active');
                $('#select span.' + makeActive).addClass('active');
            }
        });
    });

    $(".nav").click(function (e) {
        console.log('hej');
        var divId = $(this).data('sec'); console.log(divId);
        $('body').animate({
            scrollTop: $(divId).offset().top - $select.height()
        }, 500);
    });



});

jsFiddle demo

Jquery滚动脚本 - 菜单位于不在其中的部分顶部

1 个答案: