I have a fixed top navigation bar that uses a javascript function to shrink in size along with changing a couple other styles when the user scrolls past a certain anchor point. I also have a mobile hamburger icon that expands the navigation into a fullscreen menu for mobile. I would like the javascript function for shrinking the top nav to stop working whenever I click on the hamburger (opening the menu) and to resume when clicked again (closing the menu), however I am not able to get the scroll function to start or stop.
This is the code I've written so far:
<script>
var win = $(window),
nw = $('.navBgWrapper'),
sw = $('.scrollWaypoint'),
pos = sw.offset().top;
var sticky = function(){
if (win.scrollTop() > pos) {
nw.addClass('navBgWrapperChange');
$('.vjLogoWhite').removeClass('logoGo');
$('.vjLogoGreen').addClass('logoGo');
$('.navLink').removeClass('linkTop');
$('.navLink').addClass('linkScroll');
$('.navContent').on('hover', '.navLink', function () {
$('.navLink').removeClass('hoverTop');
$('.navLink').addClass('hoverScroll');
});
}
else {
nw.removeClass('navBgWrapperChange')
$('.vjLogoGreen').removeClass('logoGo');
$('.vjLogoWhite').addClass('logoGo');
$('.navLink').removeClass('linkScroll');
$('.navLink').addClass('linkTop');
$('.navContent').on('hover', '.navLink', function () {
$('.navLink').removeClass('hoverScroll');
$('.navLink').addClass('hoverTop');
});
}
}
//burger script
var sc = true;
$('.menu').click(function(){
$(this).toggleClass('open');
if (!sc) {
sc = true;
} else {
sc = false;
}
$('.menu-item').toggleClass('menuItemToggle');
$('.navMenuBg').toggleClass('navMenuBgGo');
$('.vjLogoWhite').toggleClass('logoGo');
$('.vjLogoGreen').toggleClass('logoGo');
$('.navLinks').toggleClass('navLinksShow');
});
</script>
<script>
if (sc) {
win.scroll(sticky);
}
</script>
Any help would be appreciated, thanks!
See comments of question for details, thanks Pointy.
var sticky = function(){ if (!sc) { return; } else {...}
Related
I got a problem with myNav overlay menu.
When is active and i scroll the page is going on shrink the top mainNav.
Does someone have the solution already?
How can I remove the shrinking when the overlay menu is open?
Thanks
//SHRINK
var navbarCollapse = function() {
if ($("#mainNav").offset().top > 100) {
$("#mainNav").addClass("navbar-shrink");
} else {
$("#mainNav").removeClass("navbar-shrink");
}
};
//OPEN enter code here
var iconMenu = document.querySelector('.icon-menu'),
menu = document.querySelector('.menu');
iconMenu.addEventListener('click', openMenu);
function openMenu() {
if (menu.classList.contains('open')) {
menu.classList.add('close');
iconMenu.classList.remove('icon-closed');
setTimeout(function() {
menu.classList.remove('open');
}, 200);
} else {
menu.classList.remove('close');
menu.classList.add('open');
iconMenu.classList.add('icon-closed');
iconMenu.classList.remove('.nav-link');
}
};
Currently I use .js for my sticky navbar in Bootstrap 4.1.3 which works as desired. I have tried to insert a function in the script, which makes the navbar bar collapse on mobile phones if you click outside the menu. However, without luck. https://biogenity.com/RC19/index.html
The code I am currently using is:
$(document).ready(function () {
var stickyToggle = function (sticky, stickyWrapper, scrollElement) {
var stickyHeight = sticky.outerHeight();
var stickyTop = stickyWrapper.offset().top;
if (scrollElement.scrollTop() >= stickyTop) {
stickyWrapper.height(stickyHeight);
sticky.addClass("is-sticky");
}
else {
sticky.removeClass("is-sticky");
stickyWrapper.height('auto');
}
};
$('[data-toggle="sticky-onscroll"]').each(function () {
var sticky = $(this);
var stickyWrapper = $('<div>').addClass('sticky-wrapper');
sticky.before(stickyWrapper);
sticky.addClass('sticky');
$(window).on('scroll.sticky-onscroll resize.sticky-onscroll', function () {
stickyToggle(sticky, stickyWrapper, $(this));
});
stickyToggle(sticky, stickyWrapper, $(window));
});
});
I want to be able to implement a similar function as the following. It is not certain that this is the best solution for "collapse when you click outside the menu".
$(document).on('click', function(event){
var $clickedOn = $(event.target),
$collapsableItems = $('.collapse'),
isToggleButton = ($clickedOn.closest('.navbar-toggle').length == 1),
isLink = ($clickedOn.closest('a').length == 1),
isOutsideNavbar = ($clickedOn.parents('.navbar').length == 0);
if( (!isToggleButton && isLink) || isOutsideNavbar ) {
$collapsableItems.each(function(){
$(this).collapse('hide');
});
}
});
Thanks in advance.
Based on your code, try this:
$(document).click(function (event) {
var clickedOn = $(event.target),
isNavbar = clickedOn.hasClass('navbar'),
// Target only nav links not all links
isNavbarLink = clickedOn.closest('.nav-link').length == 1,
navbarCollapse = $('.navbar-collapse'),
isNavbarOpen = navbarCollapse.hasClass('show');
// if its not navbar and navbar is opened
if (!isNavbar && isNavbarOpen) {
// if the user is not cliking on the nav links
if (!isNavbarLink) {
// thes close the navbar
navbarCollapse.collapse('hide');
}
}
});
I have this header that is working fine. My issue is that when you reload the page when the scroll position is passed 114, the header is not fixed until you scroll. I'm trying to get it to detect the scroll position of the page before the user scrolls.
function initHeader() {
var Header = document.querySelector(".header");
var HeaderContainer = document.querySelector(".header-container-after");
document.addEventListener('scroll', function () {
if (window.scrollY > 114) {
Header.classList.add('header--is-fixed');
HeaderContainer.classList.add('fixed-header-container');
} else {
Header.classList.remove('header--is-fixed');
HeaderContainer.classList.remove('fixed-header-container');
}
});
}
window.onload = initHeader;
thanks
There can be an even easier solution, use position: sticky; top: 0
It will act as an relative element until it hits the top (or before, change the top value) and from that point it will act as a fixed element.
In case you want to stick with JS for this, wrap it in a function and call it on load
let header;
let headerContainer;
function fixNav(){
if (window.scrollY > 114) {
header.classList.add('header--is-fixed');
headerContainer.classList.add('fixed-header-container');
} else {
header.classList.remove('header--is-fixed');
headerContainer.classList.remove('fixed-header-container');
}
}
document.addEventListener('DOMContentLoaded', ()=>{
header = document.querySelector(".header");
headerContainer = document.querySelector(".header-container-after");
document.addEventListener('scroll', fixNav);
fixNav();
})
Looks like you are only running the code when the user scrolls. Try running it when the user scrolls AND when the page loads. Like so:
function initHeader() {
var Header = document.querySelector(".header");
var HeaderContainer = document.querySelector(".header-container-after");
// extract the logic to a function
var updateNav = function () {
if (window.scrollY > 114) {
Header.classList.add('header--is-fixed');
HeaderContainer.classList.add('fixed-header-container');
} else {
Header.classList.remove('header--is-fixed');
HeaderContainer.classList.remove('fixed-header-container');
}
}
// run that function on scroll
document.addEventListener('scroll', updateNav);
// but also run it right now (page load)
updateNav();
}
window.onload = initHeader;
I'm working on a prototype that has a navigation bar that hides when a user scrolls down on the page and shows when the user scrolls up. I would like to take this a step further by setting an event that tracks when the user is no longer scrolling and animates the navigation panel back onto the page after a short timeframe (1.5 - 2 seconds).
I have read up on how I would go about doing this but I haven't been able to find anything that meets my needs completely.
Here is my prototype for reference: https://codepen.io/v_for_vinsanity/pen/2af1bfb20ae1578466943c7356de7348
Here is the jquery I'm using to show/hide the navigation bar:
var scrollSet = null;
var didScroll = false;
var windowTop = $(window).scrollTop();
function scrollUpdate () {
didScroll = true;
windowTop = $(window).scrollTop();
}
function scrollTicker () {
if(didScroll) {
if(windowTop > scrollSet) {
$('body').addClass('hide-nav')
scrollSet = windowTop;
}
else if(scrollSet > windowTop){
$('body').removeClass('hide-nav')
scrollSet = windowTop;
}
didScroll = false
}
requestAnimationFrame(scrollTicker);
}
$(window).scroll(scrollUpdate);
scrollTicker();
I find myself getting frustrated with JS yet again! please help!
below is some code I am using for a simple chat app, that refreshes the content from a text file via an AJAX request. At the same time it scrolls to the bottom of the window. I want it so if the user scrolls up to catch up it doesnt keep interupting this behavour by sending them down to the bottom when it refreshes. How could I do this.
<script>
$(function() {
startRefresh();
});
function startRefresh() {
setTimeout(startRefresh,3000);
$.post('pollchat.php', function(data) {
$('#content_div_id').html(data);
var wtf = $('#content_div_id');
var height = wtf[0].scrollHeight;
wtf.scrollTop(height);
});
}
</script>
Any help greatly appreciated.
See How I have used current scroll position and counted that whether user has scrolled or not..
$(function() {
startRefresh();
});
function startRefresh() {
setTimeout(startRefresh, 1000);
var wtf = $('#content_div_id');
var currentScrollPos = wtf.scrollTop();
var elementHeight = wtf[0].scrollHeight;
var scroll = false;
//User has scrolled, don't set scroll
if (wtf.height() + currentScrollPos >= elementHeight) {
scroll = true;
}
var data = $('#content_div_id').html();
data += "Some Text<br/>";
$('#content_div_id').html(data);
if (scroll) {
var height = wtf[0].scrollHeight;
wtf.scrollTop(height);
}
}
#content_div_id {
max-height: 100px;
overflow-y: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content_div_id">
Some Text
<br/>Some Text
<br/>Some Text
<br/>Some Text
<br/>
</div>
UPDATE:
Try this code, you probably need to fix one or two things .. but have a look at the code and get an idea
$(function() {
startRefresh();
});
function startRefresh() {
setTimeout(startRefresh,3000);
$.post('pollchat.php', function(data) {
var wtf = $('#content_div_id');
var currentScrollPos = wtf.scrollTop();
var elementHeight = wtf[0].scrollHeight;
var scroll = false;
//User has scrolled, don't set scroll
if (wtf.height() + currentScrollPos >= elementHeight) {
scroll = true;
}
$('#content_div_id').html(data);
if (scroll) {
var height = wtf[0].scrollHeight;
wtf.scrollTop(height);
}
});
}