Can You help me please with a one thing I can't manage?
I have used scrolling-nav.js for the top menu on my website - Interior, Exterior etc. http://lukaszradwan.com/www_architect/services.php
Now I set the offset using this code
$(window).scroll(function() {
if ($(".navbar").offset().top > 130) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 130
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
But when you click for example to Exterior, active class is not working exactly at this position.
I tried to use method form another topic, but my "js" knowledge is poor. jquery scroll, change navigation active class as the page is scrolling, relative to sections
Thanks in advance.
Right now, active class is applied only when the top offset of section is 0. You can change it to other value like 130 using jquery. Add this code:
$(window).scroll(function(){
/* Get id of sections corresponding to top nav menu */
var scroll_sections = []
$('a.page-scroll').each(function(){
scroll_sections.push($(this).attr('href'));
})
for (i in scroll_sections)
{
/* Instead of 0, if the top position offset of section is 130 or less,
we add active class for that section in nav menu */
if ($(scroll_sections[i]).position().top <= $(window).scrollTop() + 130)
{
$('nav li.active').removeClass('active');
$('nav a').eq(i).parent().addClass('active');
}
}
});
Related
at the website klangmanufaktur.de we have a horizontal scrolling design (on desktop screens). However, on some subpages there are large background images and scrolling is not smooth at all (when clicking the horizontal arrows):
www.klangmanufaktur.de/impressionen/
This is especially true for Safari.
The images are loaded using tags, but are changed to background images within a large using DOM manipulation with jQuery. There are to issues:
1. No smooth scrolling
2. Background images load only when scrolled into the viewport, so for a short moment, the black background is visible
Here is the code for horizontal scrolling on arrow click:
// horizontal scrolling on arrow click
$('.horizontal-arrow.right').click(function(){
if($(window).innerWidth()>767) {
var scrolled = false;
$('.pagebox-inner').each(function(){
if($(this).offset().left>window.pageXOffset + $(window).width() - $('header.site-header').outerWidth() && scrolled==false) {
$('body,html').animate({ scrollLeft: $(this).offset().left - $('header.site-header').outerWidth() }, 2000, 'swing',function(){
});
scrolled=true;
}
});
}
});
$('.horizontal-arrow.left').click(function(){
if($(window).innerWidth()>767) {
var scrolled = false;
$($('.pagebox-inner').get().reverse()).each(function(){
if($(this).offset().left<window.pageXOffset + $('header.site-header').outerWidth() && scrolled==false) {
$('body,html').animate({ scrollLeft: $(this).offset().left - $('header.site-header').outerWidth() }, 2000, 'swing',function(){
});
scrolled=true;
}
});
}
});
And here is the code for scrolling when a submenu link is clicked, like here:
www.klangmanufaktur.de/restaurierung
// horizontal scrolling of anchor links
$('nav.main-navigation li a').each(function(){
if($(this).attr('href')!=$(this).attr('href').replace('#','')) {
$(this).click(function(){
currentMainHash = window.location.hash;
var linkUrlSplit = $(this).attr('href').split("#");
var currElem = $('#post-'+linkUrlSplit[linkUrlSplit.length-1]);
if(currElem) {
if($(window).innerWidth()>767) $('body,html').animate({ scrollLeft: currElem.offset().left - $('header.site-header').outerWidth() }, 2000,'swing',function(){ scrolled = false; });
else $('body,html').animate({ scrollTop: currElem.offset().top }, 2000,'swing',function(){
scrolled = false;
$(this).blur();
});
}
$('.currentLink').removeClass('currentLink');
$(this).addClass('currentLink');
});
}
});
Any suggestions how to resolve the "unsmooth scrolling" issue here? Is it maybe helpful do display the images as elements instead of background images?
Thanks for your help!
Kind regards
joschi81
I have a scrolling page with a navbar and I want the section the user is scrolling through to be highlighted in the navbar. At the moment it almost accomplishes this, but is highlighting the incorrect link.
A demonstration is at http://codepen.io/meek/pen/NNprYb?editors=1000
The code that does this is as follows:
// highlight current tab
$(window).on("scroll", function() {
var currentPos = $(window).scrollTop();
$('.nav li a').each(function() {
var sectionLink = $(this);
var section = $(sectionLink.attr('href'));
if(section.position().top <= currentPos && sectionLink.offset().top + section.height() >= currentPos) {
$('.nav li').removeClass('active');
sectionLink.parent().addClass('active');
}
else {
sectionLink.parent().removeClass('active');
}
});
});
I've tried several things, but can't get it to reliably add the active class to the correct session. Help appreciated!
edit: to be clearer, the problem is that it's only highlighting the section when you've scrolled a bit into it, instead of right at the top, meaning that when you click a section to scroll to the top of that section automatically, that section is not highlighted.
edit2: So changing the if statement to:
if(currentPos + $('#nav-wrapper').outerHeight() >= section.position().top && currentPos + $('#nav-wrapper').outerHeight() <= sectionLink.offset().top + section.outerHeight()) {
has made an improvement although not completely fixed the issue. The home, about and portfolio sections all highlight the correct link but not contact.
You need to account for the height of the navbar and subtract it from the top of the section you want highlighted.
The height is currently hardcoded in your CSS at 75px but I included a jQuery selector for the height in case it needs to change/disappear for smaller screens.
Nice work by the way.
$(window).on("scroll", function() {
var currentPos = $(window).scrollTop();
$('.nav li a').each(function() {
var sectionLink = $(this);
// capture the height of the navbar
var navHeight = $('#nav-wrapper').outerHeight() + 1;
var section = $(sectionLink.attr('href'));
// subtract the navbar height from the top of the section
if(section.position().top - navHeight <= currentPos && sectionLink.offset().top + section.height()> currentPos) {
$('.nav li').removeClass('active');
sectionLink.parent().addClass('active');
} else {
sectionLink.parent().removeClass('active');
}
});
});
i'am trying to make the airbnb.nl effect where a 'how it works' div appears from the top on button click. Then when you scroll down (or click the close button) it disappears again.
When the div is hide after scrolling to 630px the scrollbar shoots up so i've set the scrollbar to 0 at the same time. Problem is that it keeps repeating this 'scrollTop to 0' script when you scroll down further, making it a unwanted loop.
Any suggestions on how to only use this script (scrollTop -> 0) once, while the div is shown? Or maybe even prettier solutions? ;)
This is where it's live: www.energyguards.nl (and i disabled the scrollTop function there for now)
jQuery(document).on('click', '.flip', function(e){
e.preventDefault();
jQuery(".panel").slideToggle("slow");
});
$(window).scroll(function(){
if($(this).scrollTop() > 630) $('.panel').hide();
if($(this).scrollTop() > 630) $(window).scrollTop( 0 );
});
Hope to hear from you guys,
cheers Joeri
Check this DEMO out http://jsfiddle.net/yeyene/46o7chfu/1/
Hope you means like this.
JQUERY
$(document).ready(function () {
// scroll to top and show top content
$('#show_top_bar').on('click',function(){
$('html, body').stop().animate({
scrollTop: 0
}, 300, function() {
$('#top_bar').slideDown(300);
});
});
// hide top content on click close icon
$('#close_top_bar').on('click',function(){
$('#top_bar').slideUp(100);
});
});
$(window).scroll(function() {
// hide top content when scroll position is top of content
if($(this).scrollTop() > $('#content').position().top){
if($('#top_bar').css('display') !== 'none') {
$('#top_bar').slideUp(0);
$('html, body').stop().animate({
scrollTop: 0
}, 0 );
}
}
});
I am a noob and for a school project I was trying to create a single page site that had a static nav menu at the top that always stayed there and I wanted it to do an animated scroll effect when you click it's link. Someone here made this for me and it works perfect.
However, you notice it says .top - 98 and that is because my nav is 98px tall so that it doesn't cut off the section it's jumping to.
Now that I am getting into media queries, I may increase the height of that nav at certain breaks. So I am wondering, is it possible to change this from 98 to some sort of [nav current height] variable? So that it will work regardless of what the height of my nav is?
Thanks in advance!!
$(document).ready(function() {
$("nav a").on('click', function() {
var link = $(this).attr('href');
$('html,body').animate({
scrollTop: ($(link).offset().top - 98)
}, 'slow');
return false;
});
});
how about
$('html,body').animate({scrollTop: ($(link).offset().top - $('nav').height())},'slow');
Yes you can do that
scrollBarFunc = function(){
var myNavHeight = $("#myselectorId").height(); //just put here your id or class
$("nav a").on('click',function(){
var link = $(this).attr('href');
$('html,body').animate({scrollTop: ($(link).offset().top - myNavHeight)},'slow');
return false;
});
}
$(document).ready(function(){
scrollBarFunc();
});
$(window).resize(function(){
scrollBarFunc(); //recall function to work when you resize
});
I have a series of news items (alerts and announcements, to be precise), each individually wrapped inside their own <div> tags, set to hide everything but their headline on page load. On clicking any headline (h2) that individual item's details reveal (slideDown), and any other open items collapse (slideUp). Thus only one news item is viewable at a time. All good.
I also have my code set to scrollTop to the top of the recently clicked div when the window width is tablet sized or less (767px). This only works partially.
I know what the problem is, but not the solution.
The problem is that when I click a different news item, it's scrollTop coordinates are off by the height of the div that's being auto-closed. I've banged my head enough, and the solution's probably simple, but I'm not coming up with it.
The page is live here: http://northqueensviewhomes.com/announcement-test
Remember to make your page width less than 767px and refresh (you'll see the layout respond when you're small enough, then click around a few of the top alert items and you'll eventually see one of them scroll way too high, or even down instead of up to the top of the $this div.
Here's my jQuery:
if ($('#bboards').length) {
/* Page Load Cleanup */
$('.announcement_item h2 + div,.alert_item h2 + div').hide().removeClass('toggler');
$('.moreText').removeClass('hidden');
function hideAll() {
$('.announcement_item h2, .alert_item h2').removeClass('toggler').children('.moreText').fadeIn('fast').end().next('div').slideUp('fast');
}
$('.announcement_item h2,.alert_item h2').hover(function() {
$(this).css({
'cursor': 'pointer',
'color': '#BC2E34',
});
}, function() {
$(this).css({
'cursor': 'default',
'color': 'black',
});
}).click(function() {
if ($('.toggler').length) {
var previouslySelected = $('.toggler').parent('div').height();
alert(previouslySelected);
} else {
var previouslySelected = 0;
// alert(previouslySelected);
}
if ($(this).hasClass('toggler')) {
hideAll();
$('.toggler').removeClass('toggler');
$(this).children('.moreText').fadeIn('fast'); //this is the "click to read more… text on the link"
if ($(window).width() <= 767 {
$('html, body').animate({
scrollTop: ($(this).parent('div.well').offset().top - 13)
}, 2222, 'easeInOutExpo');
}
} else {
hideAll();
$(this).addClass('toggler').next('div').slideDown('fast', 'easeInOutQuad');
$(this).children('.moreText').hide(); //this is the "click to read more… text on the link"
if ($(window).width() <= 767) {
$('html, body').animate({
scrollTop: ($(this).parent('div.well').offset().top - 13)
}, 2222, 'easeInOutExpo');
}
}
});
} // <--- End if $('#bboards').length
and you can see the HTML live on the page. I've added a bunch of dummy entries just to create page height.
I'm pretty sure that I just need to delay the scrollTop until the slideUp is complete, but, again, not sure how.
There are two relatively easy solutions you could try.
The first is, as you said, to delay the scrollTop animation:
setTimeout(function() {
$('html, body').animate({
scrollTop: ($(this).parent('div.well').offset().top - 13)
}, 2222, 'easeInOutExpo');
}, 200);
Or, you can record the initial position of every announcement and alert after you hide their contents when the page loads. Change your section labeled /* Page Load Cleanup */ to the following:
/* Page Load Cleanup */
$('.announcement_item h2 + div,.alert_item h2 + div').hide().removeClass('toggler');
$('.moreText').removeClass('hidden');
$('.announcement_item, .alert_item').each(function() {
$(this).data("top", $(this).offset().top);
});
This gives every announcement a data entry that stores its initial position. Then, whenever you need to animate the scrollTop, do the following:
$('html, body').animate({
scrollTop: ($(this).parent('div.well').data().top - 13)
}, 2222, 'easeInOutExpo');
Note that this will only work well if the contents of the announcements and alerts do not change.
I hope this helps!