Develop Reference

How to stop sticky nav from preventing scrolling to top of page

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.

bootstrap 4 hide header on certain point of the page

I have 2 fixed working navbars. What I want is to hide the first one when the second one sticks to the top. I use javascript to make the second navbar to stick below the first navbar.
var menu_position = $(".nav-features").offset().top;
$(window).on('scroll', function() {
if(($(document).scrollTop() + 50) >= menu_position){
$(".nav-features").css({"position":"fixed", "top":"112px"});
} else{
$(".nav-features").css({"position":"sticky", "top":"auto"});
}
});

issue scrollto using fixed nav

I have built a one page site using scrollto and scrollspy. The page works great once the navbar gets fixed to the top. But if you click on any links before the navbar gets fixed to top all the links are off. And there is no consistency in the height that they are off. I have played around with the offset, I do have a padding of 100px to each section to account for spacing issues.
Here is a link to the dev site...
http://23.23.170.24/aspire/
Here is the js...
$(document).ready(function(){
$(window).scroll(function(){
var window_top = $(window).scrollTop() +1; // the "12" should equal the margin-top value for nav.stick
var div_top = $('#checkdiv').offset().top;
if (window_top > div_top) {
$('nav.navbar').addClass('navbar-fixed-top');
$('section').addClass('scrolled');
} else {
$('nav.navbar').removeClass('navbar-fixed-top');
$('section').removeClass('scrolled');
}
});
$(".click").click(function(evn){
evn.preventDefault();
$('html,body').stop(true).scrollTo((this.hash, this.hash),1000, {axis: 'y', offset :0});
return false;
});
$('body').scrollspy({ target: '#navbar' })
});

When the header is stuck, Bootstrap scrollspy and scrollto are automatically taking into account the height of the header. When unstuck, all you have to do is subtract the height of the header and you'll scroll to the correct spot on your page.

Scroll Div With increase height

$(".clickable").each(function(idx, elem) { // register click for slides
elem = $(elem);
elem.click(function() {
scaleClicked(elem);
});
});
function scaleClicked(elem) { // slide clicked
var id = elem.attr("id"),
num = id.slice(-1),
postId = "post"+num,
posts = $(".post");
posts.each(function(idx, p) {
if($(p).attr("id") == postId) {
scaleUp(p);
}
else {
scaleDown(p);
}
});
}
function scaleUp(item) {
$(item).animate({height:1000},1000);
}
function scaleDown(item) {
$(item).animate({height:30},1000);
}
I need to Increase div height on click, like example 01 and at the same time, That Div Must scroll to Top of the window Like Example 02. Can You Help With This.
i tried few ways but when div increase the height, but it is scrolling to beyond the top level. but i need to stop div,when it scroll to top level of the window.

Instead of using an anchor to scroll like the example you gave you can scroll like this, for example to scroll to the bottom of a div:
$("#mydiv").animate({ scrollTop: $('#mydiv')[0].scrollHeight}, 1000);
To scroll to an item in the div you can find the position to scroll to in a number of ways, there's a good discussion here:
How do I scroll to an element within an overflowed Div?

Active state not being set by smooth-scroll plugin (JS modification)

I'm having some trouble with a script which takes care of smooth scrolling as well as the active state on my main navigation. Plugin: http://tinyurl.com/amz4kob
Please note that the navigation bar is fixed so effectively has no height.
I've got two issues which I can't seem to overcome:
On page load the active state is applied to the contact link. If you scroll down 1px the active state is correctly applied to the home link.
I can't for the life of me figure out how to modify the script to pay attention to anchors within an element with a certain ID? i.e. I only want this script to apply the active state to the elements within the tag.
Any help would be greatly appreciated.
#rrfive
To make life easy here is the commented script:
$(document).ready(function() {
//Get Sections top position
function getTargetTop(elem){
//gets the id of the section header
//from the navigation's href e.g. ("#html")
var id = elem.attr("href");
//Height of the navigation
var offset = 0;
//Gets the distance from the top and subtracts the height of the nav.
return $(id).offset().top - offset;
}
//Smooth scroll when user click link that starts with #
$('a[href^="#"]').click(function(event) {
//gets the distance from the top of the section refenced in the href.
var target = getTargetTop($(this));
//scrolls to that section.
$('html, body').animate({scrollTop:target}, 500);
//prevent the browser from jumping down to section.
event.preventDefault();
});
//Pulling sections from main nav.
var sections = $('a[href^="#"]');
// Go through each section to see if it's at the top.
// if it is add an active class
function checkSectionSelected(scrolledTo){
//How close the top has to be to the section.
var threshold = 54;
var i;
for (i = 0; i < sections.length; i++) {
//get next nav item
var section = $(sections[i]);
//get the distance from top
var target = getTargetTop(section);
//Check if section is at the top of the page.
if (scrolledTo > target - threshold && scrolledTo < target + threshold) {
sections.removeClass("active");
section.addClass("active");
}
};
}
//Check if page is already scrolled to a section.
checkSectionSelected($(window).scrollTop());
$(window).scroll(function(e){
checkSectionSelected($(window).scrollTop())
});
});

The plugin you're using checks the position of the <div class="section"></div> elements on the page, but because you've made them display:none;, all the sections are returning "0 pixels" from the top of the page, and since the "CONTACT" section is the last on the page, it's stopping there.
So, simply remove display:none; from .section in your CSS and it'll work fine.
.section {
/*display: none; <-- Comment this line out. */
height: 100%;
min-width: 990px;
}