我正在编写一个网站,希望构建一些窗口大小的div / section。 当用户在两个这些div之间停止滚动时,占用更多空间的div应该被滚动到,以便它变成全屏大小。
我正在编写一个网站,希望构建一些窗口大小的div / section。 当用户在两个这些div之间停止滚动时,占用更多空间的div应该被滚动到,以便它变成全屏大小。
有一些jQuery插件可以实现这个功能,但是以下是一个很好的模板,可以让你了解如何自己实现:
https://startbootstrap.com/template-overviews/scrolling-nav/
这是与缓动函数相关的滚动JavaScript,使其更加平滑易用://jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
FullPage.js 正好符合您的需求。
如果整个库对您来说太重了,您可以尝试使用类似于这样的东西重新实现逻辑 https://github.com/alvarotrigo/fullPage.js/blob/master/pure%20javascript%20(Alpha)/javascript.fullPage.js#L897-L913