问Jquery平滑滚动与动态高度
EN

Stack Overflow用户

提问于 2014-10-21 12:19:19

回答 1查看 552关注 0票数 0

我创建了一个个人网站，我想在那里使用平滑滚动脚本。一切都很好，但我想改变高度的标题，当你点击从。

我的问题来了..。我认为平滑滚动计算文件的高度，然后我点击菜单和标题被最小化，平滑滚动滚动到他之前计算的位置。

因此，它是500便士的正确位置。怎么处理呢？

你可以看到这网站。

您可以看到标题html、我的javascript和css i试用了 www.jsfiddle.net/brxoekdm/

谢谢你知道如何解决这个问题。

html

scroll

smoothing

javascript

jquery

数字工厂场景解决方案

帮助企业实现数字化、智能化，解决企业工厂内设备数据采集、设备指标分析、企业信息系统间数据孤岛打通、数据应用困难的问题

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-10-21 12:37:06

哼，我们一直都有想法！

如果问题是位置变化，则将滚动卷绑定到一个元素，而不是一个固定的像素；

假设您的菜单中有按钮，我不知道，类：“菜单项”：

假设

<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
    });
});

这只是如何解决这个问题的一个想法:)元素可能会通过窗口重新计算它们的偏移量，每次它们更改时，它都是本地的。因此，更安全的是依靠它。

哦，我想你是在说这个光滑的卷轴：https://github.com/kswedberg/jquery-smooth-scroll

干杯!

-更新

在我看了你的网站后，我明白了。“问题”是行动的顺序。

您正在隐藏标题，在计算滚动的同时将其转换为一个小标题，在这种情况下，您应该在隐藏标题之后使用回调和滚动，或者使用另一个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
        });
    })
});