Develop Reference

Sticky Nav JS only works if page loaded at top of screen

I'm using a bit of code that adds the class sticky to my nav bar when you scroll down. However if the page is refreshed while scrolled lower down, or if I link to an anchor lower on the page, the class doesn't add till I scroll further down. It also doesn't add while scrolling up. How would I modify the code to add the class if the widow isn't scrolled to the absolute top?
var stickyTop = $('.primary-menu-container').offset().top;
$(window).on( 'scroll', function(){
if ($(window).scrollTop() >= stickyTop) {
$('.primary-menu-container').addClass('sticky');
} else {
$('.primary-menu-container').removeClass('sticky');
}
});
https://jsfiddle.net/0qccqzox/

fixed header not getting right classes on scroll after closing fixed sidebar

I have a fixed sidebar and a fixed header with scrollable content in the main section of the page. The header is to be triggered on the scroll to hide the top portion of itself on scroll down and then show itself on scroll up. The sidebar can be triggered to hide and show itself with a button. When this happens the header gains back the full width of the page until the button is pressed to bring back the sidebar. The page loads with the sidebar opened.
So far I've been able to get the sidebar to transition off and back on the page properly. I also have the header working as intended on page load. However the issue I'm having is with the transition, more so recognizing the changed classes when the sidebar closes. I believe my issue is with the scroll javascript not recognizing the sidebar is closed because when scrolling it applies the classes to the header for when the sidebar is open. To test this I added a class called SEEME123 which never shows.
Below is the javascript for scrolling changes.
var exploreOpen = $('#explore').hasClass('open');
var exploreClosed = $('#explore').hasClass('closed');
$(function () {
var position = $(window).scrollTop();
if (exploreOpen) {
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll > position) {
$('#wrapper-site-header').removeClass('explore-open--header-full');
$('#wrapper-site-header').addClass('explore-open--header-reduced');
} else {
$('#wrapper-site-header').addClass('explore-open--header-full');
$('#wrapper-site-header').removeClass('explore-open--header-reduced');
}
position = scroll;
});
} if (exploreClosed) {
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll > position) {
$('#wrapper-site-header').removeClass('explore-closed--header-full');
$('#wrapper-site-header').addClass('explore-closed--header-reduced');
$('#wrapper-site-header').addClass('SEEME123');
} else {
$('#wrapper-site-header').addClass('explore-closed--header-full');
$('#wrapper-site-header').removeClass('explore-closed--header-reduced');
}
position = scroll;
});
} else {}
});
The javascript for the sidebar function toggles the open and closed classes on the sidebar, along with removing or adding the appropriate header class.
I don't understand why this isn't working as intended and would like to know how to resolve the issue. I've searched around attempting to understand where I screwed up, or to find an example where the scroll function does X because of Y. I've also attempted the above without variables (ie..
$(function () {
var position = $(window).scrollTop();
if (('#explore').hasClass('open')) {
), and as separate functions.
Anyway, here is a jsfiddle in case I missed something. https://jsfiddle.net/at0yxo0m/
Thank you all for your help and advice.
EDIT: Additional information.
I do have an earlier version of this layout where the scroll function only changes the header area that works with closing the sidebar. However the animations were clunky in general, and worse on mobile. Also to get everything to work right I had to wrap elements more than I thought was needed. So it was my goal to streamline as much as I could while getting the desired result.

Horizontal Scroll menu

My menu will display based on the My SQL DATABASE using ul li. Currently there are six menus visible in the website. while I increase my menu more than six, It has to show in scroll like image slider with previous and next button options. So that the menu will get scrolled horizontally.
One important point is, next button should be visible only if the menu increases more than six. Otherwise next or previous button should not show.
Let me know if i can able to get any script or html code for this.

hope this should be help you see link
DEMO
$(document).ready(function () {
$('.right').click(function () {
var position = $('.container').position();
var r=position.left-$(window).width()
$('.container').animate({
'left': ''+r+'px'
});
});
$('.left').click(function () {
var position = $('.container').position();
var l=position.left+$(window).width()
if(l<=0)
{
$('.container').animate({
'left': ''+l+'px'
});
}
});
});
SEE THE FIDDLE LINK

Nav menu indicator - sliding on hover, on click, and on scroll

I've never asked a question here, but I've made use of many answers so am hoping that the effect I'm hoping to achieve will also help others looking to achieve the same effect.
I'm currently working on a client's website and have uploaded it to my dropbox for this question:
http://dl.dropboxusercontent.com/u/62164771/stage/cw/index16042013.html
It currently uses a few different scripts to achieve the following:
(this script is in the head area)
The navigation menu is fixed, and when you click on a menu link, the page scrolls to the relevant section.
When the page scrolls to the relevant section (after being clicked on), a class (.act) is added to the active menu link. The .act class is also added when the user scrolls up and down in the page with their mouse/track pad or whatever.
(this script is at the bottom of the page)
Another effect is also added to the nav bar links:
When you hover over a nav item, a nav menu indicator arrow (a div with a background image of an arrow) slides across to the hovered link.
So this is what I want to happen
Currently the nav menu indicator arrow only slides on hover. I want it to slide to the active link when it is clicked and stay there until the user hovers on another link. My current script is a little buggy with the menu indicator not always sliding to the active link.
I also want the nav menu indicator arrow to slide to the active link when the user scrolls through the page.
Is this achievable?
Relevant Scripts
Script 1 - scroll smoothly to section and activate 'act' class when scrolling:
<script type="text/javascript">
jQuery(document).ready(function( $ ) {
$('nav a').on('click', function() {
var scrollAnchor = $(this).attr('data-scroll'),
scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]')
.offset().top + 1;
$('body,html').animate({
scrollTop: scrollPoint
}, 500);
return false;
})
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 100) {
$('#wrap section').each(function(i) {
if ($(this).position().top <= windscroll + 200) {
$('nav a.act').removeClass('act');
$('nav a').eq(i).addClass('act');
}
});
} else {
$('nav').removeClass('fixed');
$('nav a.act').removeClass('act');
$('nav a:first').addClass('act');
}
}).scroll();
})
</script>
Script 2 - For sliding the main-menu-indicator to the position of the hovered and active links
<script type="text/javascript">
$('#header')
.css('position', 'relative')
.append(
$('<div>').attr('id', 'main-menu-indicator')
)
menuHover = function(which){
if(which==null)
which = $('ul#main-menu a.act')
$('#main-menu-indicator')
.stop(true, false)
.animate({
left: ($(which).offset().left - $('#header').offset().left +
$(which).width()/2 + parseInt($(which).css('paddingLeft')) -
$('#main-menu-indicator').width()/2 )
}, 500)
}
$('ul#main-menu a')
.hover(
function(){
menuHover(this)
},
function(){
menuHover(null)
}
)
</script>

You can use Bootstrap ScrollSpy to get the desired effect, it might be easier to implement than writing your own solution. You could start the animation using the activate event.
In your case you could set <a href="#top">, you currently have a section and an article with the same id, you should get rid of one of those as it is invalid html to have more than one element with the same id, and it might break things. For example keep the id on the article: <article class="top area" id="top">. Include the ScrollSpy script on the page and add:
$('.header').scrollspy({activate: function() {
// Add your logic here.
}
});
Inside the activate function $('nav li.active') will give you the currently active li, with that info you should be able to work out where to move your arrow, and you can then run your smooth scrolling arrow code to move the arrow to the right place.
Now ScrollSpy takes care of calling activate when the user scrolls somewhere, and you react on that by moving the arrow to the right place.

fixed div while scrolling which moves other elements in a menu

I have some menu items on the right hand side of my website that are: -
Basket Summary
Best Sellers
Quick Links
etc
I want the basket summary to follow down the page as the page is scrolled, I know how to this using position: fixed, but I need it to also move the other elements out of the way otherwise it will just overlap them.
I was looking at this: jsfiddle which would do the job and works but obviously thats only on button click, I would need to adapt this to scroll via jQuery.
I have read many tutorials for floated fixed divs but they are all for one div and don't have any other divs to interact with.
Any ideas if possible and/or how to do it?
Code from js fiddle as follows: -
$(function() {
$('.upButton').click(function(e){
var $parent = $('.highlight').closest('.box');
$parent.insertBefore($parent.prev());
});
$('.downButton').click(function(e){
var $parent = $('.highlight').closest('.box');
$parent.insertAfter($parent.next());
});
});

Is this what you're looking for?: http://jsfiddle.net/cmontgomery/YVh4q/
essentially, whenever the window scrolls check to see if your section is in the visible area and if not, adjust accordingly:
$(window).scroll(function () {
var mover = $("#sidebar .quick-links");
if($(window).scrollTop() === 0) {
//console.log("to top");
mover.prependTo("#sidebar");
} else if(!isFullyInViewableArea(mover)) {
var parent = mover.closest('.section');
if(isBelowViewableArea(mover)) {
//console.log("moving up");
parent.insertBefore(parent.prev());
} else {
//console.log("moving down");
parent.insertAfter(parent.next());
}
}
});
I must admit, this solution is not the best user experience, i.e. it jumps instead of scrolling smoothly. If it were me I would put the movable section as the last item in the right column and move that down the page with absolute positioning so it follows the top of the view-able area exactly.

Use this
Drag & Drop is best.
Greetings.