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.
Related
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');
}
});
I'm attempting to resolve an issue with a "sticky" horizontal menu.
It technically works, in that the menu's position is fixed while the pages scrolls up and down.
The issue at the moment is that then the page is scrolled back up to the original position, the new resting place of the objects below the sticky menu return to the top of the browser. If that makes sense.
Here's the javascript in use:
<script>
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
// Get the navbar
var navbar = document.getElementById("navbar_cont");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
And the accompanying css
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + #call-to-action {
padding-top:164px;
}
Any help would be appreciated. Thanks!
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.
Wrapper - Overflow Hidden
Div One: Sidebar
Div Two: Main Content
Div Two will have a normal scroll. Div One I wish to have no visible scroll however when you scroll Div One it scrolls Div Two.
Upon Div One's height hitting the bottom, it will no longer scroll and visa-versa for scrolling back up.
This will result in the sidebar always being visible at the side. Before you ask, I've tried all positioning types to get this to work resulting in many failed attempts.
My live demo can be seen here: http://rafflebananza.com/admin/newadmin.html#
Note I've tried to make a JSFiddle simplified but my maths does not seem to work in there the same. Please suggest whether I should fork all my page to there or whatnot for future visitors needing the same help.
Overview
Scrolling in the wrapper will scroll sidebar to point x only (x being the sidebars height) then stopping but will continue to allow the content to be scrolled. Visa-versa for scrolling back up.
Somewhat half way there...
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop,
position = document.body.scrollTop;
function scrollD() {
var scroll = document.body.scrollTop;
if (scroll > position) {
// Scrolling Down Functions
} else {
// Scrolling Up Functions
}
position = scroll;
}
Updated the answer to match OPs requirements.
I downloaded your website in its current state and made the following changes to your code:
var scrollY = 0;
$(window).scroll(function() {
var sideNav = $('.SideNav'); // The side navigation
var wScrollY = $(this).scrollTop(); // Current scroll position of Window
var navHeight = sideNav.height(); // Height of the Navigation
var StageHeight = $(window).height() - 46; // The display space
if(sideNav.height() > StageHeight) { // Do the following if the side navigation is higher than the display space
var spaceLeft = sideNav.height() - StageHeight; // spaceLeft -> how many pixel left before fixing navigation when scrolling
if(scrollY < wScrollY) { // Scroll direction is down
if (wScrollY >= spaceLeft) // If scroll top > space left -> fixate navigation at the bottom, otherwise scroll with the content
sideNav.css({top:46-spaceLeft+wScrollY});
if (wScrollY <= 46) // Set top strict to 46. Sometimes there is white space left, caused by the scroll event.
sideNav.css({top:46});
} else { // Scroll direction is up
var sideNavTop;
if (sideNav.offset().top < 0) {
sideNavTop = Math.pow(sideNav.offset().top); // if top is negative, make it positive for comparison
} else {
sideNavTop = sideNav.offset().top;
}
if (sideNavTop > (46+wScrollY)) // Fixate the header if top of navigation appears
sideNav.css({top:46+wScrollY});
}
} else {
sideNav.css({top:46+wScrollY}); // Fixate always
}
scrollY = wScrollY;
});
This will let you scroll your side navigation up until its end. Then fixate. If you scroll up, it will still be fixated until your reach the point, where the navigation must scrolled back to its original position.
You can check the edited version here: http://pastebin.com/Zkx4pSKe
Just copy the raw code into a blank html page and try it out.
It's a bit messy and maybe not the best solution, but it works.
Ok, here you go:
var $sidebar = $('.sidebar'),
$window = $(window),
previousScroll = 0;
$window.on('scroll', function (e) {
if ($window.scrollTop() - previousScroll > 0) {
$sidebar.css({
'top': Math.max($window.scrollTop() + $window.height() - $sidebar.outerHeight(true), parseInt($sidebar.css('top'))) + 'px'
});
} else {
$sidebar.css({
'top': Math.min($window.scrollTop(), parseInt($sidebar.css('top'))) + 'px'
});
}
previousScroll = $window.scrollTop();
});
http://jsfiddle.net/7nwzcpqk/1/
i might have misunderstood your desired result incorrectly but you can see if this works for you :
.SideNav {
position: fixed; // you currently have this as position:absolute;
}
You don't need nor a wrapper element nor jQuery. I assume that you are using a wrapper because you want to have the top bar placed there. I think there is a better way to do it by using simply three divs.
The top bar has to be fixed (to be always visible) and of full width.
The side bar also has to be fixed (to be always visible) with a top margin of the height of the top bar.
The content needs just a left padding (width of side bar) and top padding (height of top bar).
Here is the example code (http://jsfiddle.net/zckfwL4p/):
HTML
<div id="top_bar"></div>
<div id="side_bar">links here</div>
<div id="content"></div>
CSS
body {
margin:0px;
padding:0px;
}
#side_bar {
width:50px;
position: fixed;
left:0px;
top:20px;
background-color:blue;
}
#top_bar {
position:fixed;
height:20px;
left:0px;
right:0px;
background-color:red;
}
#content {
position:relative;
padding-left:55px;
padding-top:25px;
}
I have a sidebar on my site that is fixed to the side and when the user scrolls down or up, the style attribute top is changed so that the height is adjusted.
$(window).scroll(function() {
if ($(this).scrollTop() < 125){
var v = 125 - $(this).scrollTop();
$("#sidebar").css({'top':v + 'px'});
}
if ($(this).scrollTop() >= 125)
{
$("#sidebar").css({'top':'5px'});
}
});
However, when I scroll down, the sidebar seems to jump uncontrollably and does not stick to the screen as I would like. I am using Chrome 32 so I don't see what the problem is. Please can someone help me with this issue.
Check out this fiddle.
Create a CSS class called fixed.
.fixed {
position: fixed;
top: 0px;
}
On scroll, in your JavaScript add and remove the "fixed" class accordingly to make the proper effect.
JavaScript:
$(function () {
var $sidebar = $('#sidebar');
$(window).on('scroll', function () {
if($(this).scrollTop() < 125) {
$sidebar.removeClass('fixed');
} else {
$sidebar.addClass('fixed');
}
});
});
As the header scrolls out of the window, the sidebar gets the "fixed" class and sticks to the side of the screen at the top left (0,0) respectively. When the header is coming back into view, the class is removed and the sidebar moves gracefully back to it's original position.