Jquery平滑滚动与动态高度
Jquery平滑滚动与动态高度
提问于 2014-10-21 20:19:19
我创建了一个个人网站，我想在那里使用平滑滚动脚本。一切都很好，但我想改变高度的标题，当你点击从。
我的问题来了..。我认为平滑滚动计算文件的高度，然后我点击菜单和标题被最小化，平滑滚动滚动到他之前计算的位置。
因此，它是500便士的正确位置。怎么处理呢？
你可以看到这网站。
您可以看到标题html、我的javascript和css i试用了 www.jsfiddle.net/brxoekdm/
谢谢你知道如何解决这个问题。
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-10-21 20: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
});
})
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26495542
复制相关文章
相似问题
腾讯云开发者
