I'm writing a website and I want to build some window-sized divs/sections. When the user stops scrolling between two of these divs, the div which takes more space in that moment should be scrolled at , so it's gonna be full-window-sized.
There are jQuery plugins to do this but here's a good template to see how you can implement your own:
https://startbootstrap.com/template-overviews/scrolling-nav/
Here's the relevant scrolling JavaScript for easing function to make it nice and scrollable:
//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 does exactly what you need.
If the whole library is too heavy for what you need, you could try to reimplement the logic with something like this https://github.com/alvarotrigo/fullPage.js/blob/master/pure%20javascript%20(Alpha)/javascript.fullPage.js#L897-L913
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.