I am working on a website which has full body slides, the body's overflow is hidden. If the slide's content is greater than the height of the user's screen the user is required to scroll using the scrollbar or by swiping downwards on mobile.
I need it so that if the user scrolls greater than (for example) 50px a JS event triggers and if the user scrolls back up another JS event triggers. This will allow me to hide an element if the user scrolls and the element reapper if they go back towards the top.
I have used the following which works for when the user scrolls but I need to be able to define the value for it to be greater than and then have the other event when it's less than the value.
$(".section").scroll(function() {
$("#header").css( "display", "none" ).fadeOut( "slow" );
});
Any ideas would be massively appreciated guys!
Cheers
Liam
try using $(this).scrollTop():
$(".section").scroll(function() {
if ($(this).scrollTop() > 50) {
// do something
} else {
// do something else
}
});
Related
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();
$('.topNavigationBtn').on('click',function (e) {
var target = $(this).attr('targetId');
$("body").animate({ scrollTop: $(target).offset().top }, 1000);
})
Please note this isn't on all IOS devices, but on some, after the first animation, until the user manually scrolls the page the topNavigationBtn's are no longer clickable. Any ideas why this would be would much appreciated.
The answer is to hack.
If you add a div at the bottom of the page, that you change the height of on animate complete, this then lets IOS update the scrollTop, without the user needing to scroll themselves.
J
I have a container (div) on the page. This container has a scrolling (provided by overflow:auto; height:400px).
I need no provide a URL, that will open a page so that the main page will not be scrolled, but the text in the container will be scrolled.
I tried www.mysite.com#position, but by this way the main page is scrolled too (and I need, that users will see the header on the top of the screen, and the "#position" position on the top of the container)
This is possible with javascript. And I will show a jQuery example here.
if (window.location.hash == '#position') {
$('#containerDiv').animate({
scrollTop: $("#actual_position").offset().top
}, 2000);
}
The actual_position should be the place where to scroll to. position should just be in the url and not on the page, to prevent the whole page from scrolling.
May you use the css-properties: position:fixed, top:..., left:... for your element that should stay at a certain place on your side, when an user scrolls.
Furthermore you can put all content that you do not want to be scrolled into a div and define the css-properties.
I hope this helps you a little bit.
Really it's an upgrading of Arjan answer (and now this really works).
As Arjan's suggestion the script will not work every time, but only by providing #scroll in the end of url (www.mysite.com#scroll). This script will scroll the container scroll bar to the #position element, and the all document will stay.
jQuery(window).load(function(){
container_top = jQuery('#container').offset().top;
element_top = jQuery('#position').offset().top;
element_relative_top = element_top -container_top;
if (window.location.hash == '#scroll') {
jQuery('#container').animate({
scrollTop: element_relative_top
}, 2000);
}
})
I have the following jQuery function which triggers aTestEvent() when the user scrolls horizontally past 500 pixels:
jQuery(document).scroll(function(){
if(jQuery(this).scrollLeft() >= 500){
aTestEvent();
}});
Here's the issue: I only want aTestEvent() to be triggered once! However, every time the user scrolls back to the beginning of the page and then again past 500 pixels, aTestEvent() is triggered again.
How can we adjust the above code so that the trigger only occurs for the first time the user scrolls past 500 pixels?
You can use on and off methods:
$(document).on('scroll', function() {
if( $(this).scrollLeft() >= 500 ) {
$(document).off('scroll');
aTestEvent();
}
});
http://jsfiddle.net/3kacd/
Please Note: This code snippet could "off" all the scroll event available on a particular page but to scroll off only intended scroll handler without disturbing other scroll handlers, we can use a namespace. Namespaces are similar to CSS classes in that they are not hierarchical; only one name needs to match.
$(document).on('name1.scroll', function() {
if( $(this).scrollLeft() >= 500 ) {
$(document).off('name1.scroll');
aTestEvent();
}
});
http://jsfiddle.net/shekhardtu/3kacd/57/
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>