Here is a link to the item in question:
http://www.nychukdesign.com/uploads/dynamic-top-bar-nav-menu.html
All HTML, Javascript and CSS is in the one html file
Functionality description:
This is a simple dynamic horizontal navigation bar that is intended to disappear when a user scrolls down the page, in which a trigger is activated when the user mouses into the area, of which it slides down and reappears, and disappears once more upon mousing out. When the user scrolls back to the top the navigation returns to it's default (static) state...which is where the problem comes in.
Problem description:
Sometimes (and yes I can not re-create this problem every time) when you return to the top of the page, and the navigation returns to it's default state, when the mouse leaves this area (without scrolling down again) the navigation will slide up and disappear. Sometime it will happen on the first try, sometimes after several, and primarily in Firefox 2.0, although I have had it happen once or twice in Safari.
My thoughts:
I am baffled by this, and why I am seeking help. Any advice would be greatly appreciated.
To re-create the problem
Update: I just discovered how to re-create the problem. You must scroll down and trigger the menu at least once, before scrolling back to the top, in which mousing over the menu will for some reason make it disappear.
Code:
<script type="text/javascript">
// Use short notation of DOM ready
$(function(){
// Assign variables for the menu, the trigger and the menu position (relative to the document)
var menu = $('#menu'),
menuTrigger = $('#menu-trigger'),
pos = menu.offset();
// Listen for the scroll event
$(window).scroll(function(){
// If we scroll past the position of the menu's height and it has it's default style, then hide menu.
if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
menu.fadeOut('fast', function(){
// Remove the default class and replace with fixed class
$(this).removeClass('default').addClass('fixed');
});
// Initiate the trigger to show and hide the menu with the mouse event
$(menuTrigger).removeClass('hidden').addClass('block').mouseenter(function(){
$(menu).slideDown('fast').mouseleave(function(){
$(menu).slideUp('fast');
});
});
// If we scroll back to top and menu has fixed class, fadeIn menu
} else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
menu.fadeIn('fast', function(){
// Hide the trigger
$(menuTrigger).removeClass('block').addClass('hidden');
// Give menu default style
$(this).removeClass('fixed').addClass('default');
});
}
});
});
</script>
Related
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.
Create a html page for mobile some part of content is showing on Menu bar.
Only the bottom content is showing on menu bar how to avoid it ?
and also I want to disable scroll-bar when menu button is clicked & enable when content is touched using Mobile.
I tried below code but its disabliling but not enabling scrollbar when content screen is clicked on mobile :(
My Javascript :
$(document).ready(function() {
scrollTopPos = $( document ).scrollTop();
allowScrolling = true;
$(document).scroll(function() {
if(allowScrolling === false) {
$( document ).scrollTop( scrollTopPos );
} else {
}
});
$( "#mobile-toggle" ).click(function() {
$('body,html').css('overflow', 'hidden');
$("#divCls").css('display','None')
});
$(document).on('touchmove', function(e) {
e.preventDefault();
showDiv()
});
});
function showDiv() {
document.getElementById('divCls').style.display = "block";
}
It's hard to tell without the full code, but in terms of keeping the menu at the front you can just use CSS to se the Z-index of the DIV. In terms of the scroll, add a CSS rule trigger within your JavaScript to set Overflow to Hidden then set it back to scroll when you click the close button.
Also, if only parts are spilling over then be weary of the page size, if you're using a slide in menu that is hidden to the side then slides the whole page over, then mobile users can swipe it shut but the open button will not work unless you use the jquery swipe functionality so again, the z index and a bit of doodling with the script to make the menu sit over the page would fix this. Again, more script would be handy :P
I replaced the scrolling animation of my one page website with another scrolling animation which changes the URLs when you use the topbar (it was build in foundation)
While the URLs now change when I click an item in the topbar all the other links or clickable elements on my page make it scroll back to the top of the page.
For example when I try to click the next/prev buttons of my slider it scrolls back to the top of the page as if I clicked on Home.
Can someone see whats wrong with the code for the animation?
$(document).ready(function () {
$('a[href^="#"]').click(function () {
var target = $(this.hash),
hash = this.hash;
if (target.length == 0) {
target = $('a[name="' + this.hash.substr(1) + '"]');
}
if (target.length == 0) {
target = $('html');
}
$('html, body').animate({
scrollTop: target.offset().top
}, 500, function () {
location.hash = hash;
});
return false;
});
});
PS: When I scroll manually the URLs don't change when I go down to the next page. If anyone has a fix for this I'll be happy to here from you! (I tried using history.js but that only seems to work if you have a server, which I don't)
//* EDIT *//
I just found out it's not all links that make it scroll to the top of the page, just the buttons of my orbit slider and the menu button when the topbar is collapsed
//EDIT 2//
The URL now changes when I scroll to the next page!
The only problem I am seeing right now is that the buttons of my orbit slider and the menu button of the collapsed topbar act the same as my home button (makes the page scroll all the way back to the top) for some reason.
So the last thing I need to do is get the buttons working again. Making the menu button expand the topbar and making the next and prev buttons of my slider work as normal
If you only want to change the hash depending on the scrollPosition you are half way there.
You'll need to bind some logic to the scroll event. Here is a fork of your Fiddle where the hash is changed on scroll.
When the user scrolls the page we iterate through all .page elements and compare their offset().top against $( document ).scrollTop().
We set the new hash to be the id of the last .page element that has a lower offset().top than $( document ).scrollTop() is.
(I also debounced the function so it doesn't fire constantly when scrolling - you could of course remove that part)
You should however consider that by changing the hash you will jump to the equivalent element. Here is a guide on how to suppress that behaviour.
EDIT:
Here is an updated Fiddle where I implemented the solution from above for suppressing forced scroll on hash change.
I input this code (which I pulled from this answer: Make a div appear when scrolling past a certain point of a page) to make a div appear when the user scrolls down on the page.
The problem is: The div appears as soon as the page loads, and disappears when the user scrolls, and then reappears when they scroll > 700.
How do I get the div to not show up at the beginning of the page load?
Thanks!
<script>
// Get the headers position from the top of the page, plus its own height
var startY = 700;
$(window).scroll(function(){
checkY();
});
function checkY(){
if( $(window).scrollTop() > startY ){
$('.scroll-up').slideDown();
}else{
$('.scroll-up').slideUp();
}
}
// Do this on load just in case the user starts half way down the page
checkY();
</script>
In your CSS set display:none property for the div you don't want to show on page load
Instead of slideUp() and slideDown()
you can use, fadeIn() and fadeOut() or slidetoggle();
I'm been trying to get my head around issue and seem to cant find some help.
http://fiddle.jshell.net/DQgkE/7/show/
The experience is a bit jumpy and buggy now- but what i will like is
1) When you scroll down the page. I want the Sticky Nav to be (disable,dropped off, stop) at a specific location(chapter-3) on the page and the user should have the ability to keep scrolling down.
2) When the user is scrolling back up, the code will stick the nav back and carry it up until the nav reaches the original position at the top.
Below is a starting point.
3) Currently is kinda of doing that but there's some huge jump going on when scrolling back up
http://imakewebthings.com/jquery-waypoints/#doc-disable
using disable, destroy, enable option will be nice.
This is a original experience cleaned: http://fiddle.jshell.net/DQgkE/1/show/
Thanks for the help in Advance.
I'm not sure how this plugin you used work, but I have a solution I wrote a while back that I wrote in jquery. It has few variables at the top, the item you wanted sticky, the item where you want it to stop, and the class to add when it becomes sticky and padding at the top and bottom. I only modified the javascript portion in this fork.
EDIT
I went ahead and fixed the original code. Solution without waypoint plugin is in comments.
Here is the result:
http://fiddle.jshell.net/Taks7/show/
I would recommend to use jQuery (that was a surprise, right?! :P)
$(document).ready(function() { //when document is ready
var topDist = $("nav").position(); //save the position of your navbar !Don't create that variable inside the scroll function!
$(document).scroll(function () { //every time users scrolls the page
var scroll = $(this).scrollTop(); //get the distance of the current scroll from the top of the window
if (scroll > topDist.top - *distance_nav_from_top*) { //user goes to the trigger position
$('nav').css({position:"fixed", width: "100%", top:"*distance_nav_from_top*"}); //set the effect
} else { //window is on top position, reaches trigger position from bottom-to-top scrolling
$('nav').css({position:"static", width:"initial", top:"initial"}); //set them with the values you used before scrolling
}
});
});
I really hope I helped!