Question

我创建了一个个人网站，我想使用smoothscroll脚本。一切都很好，但是当你点击某些东西时，我想改变标题的高度。

这是我的问题....我认为smoothscroll计算文档的高度，然后我点击菜单和标题最小化，smoothscroll滚动到他之前计算的位置。

所以这是500px的正确位置。怎么处理？

您可以看到 this 网站。

你可以看到标题html，我的javascript和css我尝试 www.jsfiddle.net/brxoekdm /

感谢您的每一个想法如何解决它。

Answer 1

哼哼，我们离开的想法！

如果问题是位置改变，那么将滚动绑定到一个元素而不是固定像素;

让我们在你的菜单中说你有按钮我不知道，上课：＆＃39; menu-item＆＃39;：

假设

<img class="menu-item" data-target="#my-target-selector"/>

这样：

var menuSelector

menuSelector = $('.menu-item');
menuSelector.on('click', function(event){
    event.preventDefault();

    var $self, target;
    $self = $(this);
    target = $self.data('target');
    // Go
    $.smoothScroll({
        scrollTarget: target
    });
});

这只是如何解决它的一个想法:) 元素可能会在每次更改时通过窗口重新计算其偏移量，它是原生的。所以依靠它更安全。

哦，我想你正在谈论这个smoothscroll：https://github.com/kswedberg/jquery-smooth-scroll

干杯！

----更新

看了我理解的网站后。＆＃34;问题＆＃34;是行动的顺序。

您正在隐藏标题，在计算滚动的同时将其转换为迷你标题，在这种情况下，您应该使用回调并在隐藏标题后滚动，或使用其他css功能来实现迷你标题

当我更好地处理Javascript时，让我们为您创建一个想法：）

这里我稍微改了一下，但流程的主要思想是：首先隐藏你的标题，然后向下滚动。

我从你的core.js文件中获取了这个函数

var menuSelector, hideHeader, showHeader, $window, $header, $head;

$window = $(window);
$header = $(".header-top");
$head = $("header");


hideHeader = function(next){
    $header.removeClass('.header-top').addClass("fixed");
    $head.addClass("mini");
    if(next !== undefined){
        next();
    }
};

showHeader = function(next){
    $header.removeClass("fixed").addClass('.header-top');
    $head.removeClass("mini");
    if(next !== undefined){
        next();
    }
};

$window.scroll(function() {
    var scroll = $window.scrollTop();
    if (scroll >= 40) {
        hideHeader();
    } else {
        showHeader();
    }
});

menuSelector = $('.menu-item');
menuSelector.on('click', function(event){
    event.preventDefault();
    var $self, target;
    $self = $(this);
    target = $self.data('target');
    // Let's hide first and scroll later
    hideHeader(function(){
        $.smoothScroll({
            scrollTarget: target
        });
    })
});

Jquery smoothscroll vs动态高度

1 个答案: