I have tried to achieve the horizontal scroll with mcustomscrollbar plugin but I want something how this website is doing https://www.happymaven.co.uk/ on the benefits fold, how can I make it sticky and unsticky after the scroll is done.
var stickytl = $('.tl-section').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > stickytl) {
$('.tl-section').removeClass('noscrolltl');
$('.tl-section').addClass('scrolltl');
}
else {
$('.tl-section').removeClass('scrolltl');
$('.tl-section').addClass('noscrolltl');
}
});
Related
On the mobile version of the site, the sticky nav appears after you scroll past the header, however once this appears, you can't scroll back up to the very top of the page because the nav won't unstick. What do I need to change to allow me to scroll to the top of the page?
$(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, .nav-header .genesis-nav-menu, .nav-small .genesis-nav-
// Sticky Navigation
var headerHeight = $('.site-header').innerHeight();
var beforeheaderHeight = $('.before-header').outerHeight();
var abovenavHeight = headerHeight + beforeheaderHeight - 1;
$(window).scroll(function(){
if ($(document).scrollTop() > abovenavHeight){
$('.navigation-container').addClass('fixed');
$('.nav-primary').addClass('fixed');
$('.nav-secondary').addClass('fixed');
} else {
$('.navigation-container').removeClass('fixed');
$('.nav-primary').removeClass('fixed');
$('.nav-secondary').removeClass('fixed');
}
});
You might want to use position: sticky instead of JS to do your sticky menu.
I'm trying to fix a problem on this template:
https://codepen.io/eksch/pen/xwdOeK
The highlighting effect on the navigation menu only works on a reduced browser height, if I resize the window to full screen (https://codepen.io/eksch/full/xwdOeK) and scroll down to section 7, the link on the navigation menu will not be highlighted. (I'm viewing from a 27 in imac)
In the javascripts, I believe this funciton controls the link highlight:
$(window).scroll(function() {
var scrollDistance = $(window).scrollTop();
// Show/hide menu on scroll
//if (scrollDistance >= 850) {
// $('nav').fadeIn("fast");
//} else {
// $('nav').fadeOut("fast");
//}
// Assign active class to nav links while scolling
$('.page-section').each(function(i) {
if ($(this).position().top <= scrollDistance) {
$('.navigation a.active').removeClass('active');
$('.navigation a').eq(i).addClass('active');
}
});
}).scroll();
Is there a way that I change the code to adapt to all screen size? And how should I make the section interactive with bootstrap?
I'm stil new to front-end development, appriciate for any help!
Fix your if statement:
if ($(this).position().top - $(this).height() <= scrollDistance)
I've got a fixed header on scroll adding class 'fixed' this works fine. I scroll down and after 50px class 'fixed' is added to my header container and when i scroll back up the 'fixed' class is removed.
Now on my blog pages i'd like the 'fixed' class to always be there, so on page load and even after scrolling up and down i'd like the class 'fixed' to always be added to my header container.
I'm using if else statements in my js but i can't seem to get it working right:
//Fixed header on scroll
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
$(".header-wrapper").addClass("fixed");
} else if {
$('.blog .header-wrapper').addClass('fixed');
} else {
$(".header-wrapper").removeClass("fixed");
}
});
Any ideas how to sort this?
This makes more sense: Set the fixed class on the blog and test if we have a blog or not when adding the scroll event handler
$('.blog .header-wrapper').addClass('fixed');
if ($(".blog").length==0) {
$(window).scroll(function() {
$(".header-wrapper").toggleClass("fixed",$(window).scrollTop()>=50);
});
}
Do note that the scroll event is triggered every pixel so you may want to debounce it
You have to use conditions in the if clause like so:
//Fixed header on scroll
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
$(".header-wrapper").addClass("fixed");
} else if($('.blog .header-wraper').length > 0) {
$('.blog .header-wrapper').addClass('fixed');
} else {
$(".header-wrapper").removeClass("fixed");
}
});
I'm trying to use both jScrollPane -or any other functioning custom scrollbar plugin- and a sticky nav bar at the same time, but it simply doesn't work, no matter what I do.
JS FOR THE STICKY NAVBAR
var num = 200; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.navbar').addClass('fixed');
} else {
$('.navbar').removeClass('fixed');
}
});
JS FOR JSCROLLPANE
$(function()
{
$('#bodyID').jScrollPane();
});
Any suggestion ?
I have problems adding a class to the navigation after scrolling to get a fixed class. My website has a video in the background and only the <div> with the .wrap class can scroll all the content. When scrolling I would like the navigation to be fixed on top.
This is my Javascript code:
$(document).ready(function() {
var navpos = $('.navbar').offset();
console.log(navpos.top);
$(window).bind('scroll', function() {
if ($(window).scrollTop() > navpos.top) {
$('.navbar').fadeIn(500).addClass('fixed-top');
}else {
$('.navbar').removeClass('fixed-top');
}
});
});
But the problem is that the body is in fixed position and only the content wrap is actually scrolling. How do I fix this?
Bind the scroll to the wrapper
$(document).ready(function() {
var navpos = $('.navbar').offset();
console.log(navpos.top);
$(window).bind('scroll', function() {
if ($('.wrapper').scrollTop() > navpos.top) {
$('.navbar').fadeIn(500).addClass('fixed-top');
}else {
$('.navbar').removeClass('fixed-top');
}
});
});