at the website klangmanufaktur.de we have a horizontal scrolling design (on desktop screens). However, on some subpages there are large background images and scrolling is not smooth at all (when clicking the horizontal arrows):
www.klangmanufaktur.de/impressionen/
This is especially true for Safari.
The images are loaded using tags, but are changed to background images within a large using DOM manipulation with jQuery. There are to issues:
1. No smooth scrolling
2. Background images load only when scrolled into the viewport, so for a short moment, the black background is visible
Here is the code for horizontal scrolling on arrow click:
// horizontal scrolling on arrow click
$('.horizontal-arrow.right').click(function(){
if($(window).innerWidth()>767) {
var scrolled = false;
$('.pagebox-inner').each(function(){
if($(this).offset().left>window.pageXOffset + $(window).width() - $('header.site-header').outerWidth() && scrolled==false) {
$('body,html').animate({ scrollLeft: $(this).offset().left - $('header.site-header').outerWidth() }, 2000, 'swing',function(){
});
scrolled=true;
}
});
}
});
$('.horizontal-arrow.left').click(function(){
if($(window).innerWidth()>767) {
var scrolled = false;
$($('.pagebox-inner').get().reverse()).each(function(){
if($(this).offset().left<window.pageXOffset + $('header.site-header').outerWidth() && scrolled==false) {
$('body,html').animate({ scrollLeft: $(this).offset().left - $('header.site-header').outerWidth() }, 2000, 'swing',function(){
});
scrolled=true;
}
});
}
});
And here is the code for scrolling when a submenu link is clicked, like here:
www.klangmanufaktur.de/restaurierung
// horizontal scrolling of anchor links
$('nav.main-navigation li a').each(function(){
if($(this).attr('href')!=$(this).attr('href').replace('#','')) {
$(this).click(function(){
currentMainHash = window.location.hash;
var linkUrlSplit = $(this).attr('href').split("#");
var currElem = $('#post-'+linkUrlSplit[linkUrlSplit.length-1]);
if(currElem) {
if($(window).innerWidth()>767) $('body,html').animate({ scrollLeft: currElem.offset().left - $('header.site-header').outerWidth() }, 2000,'swing',function(){ scrolled = false; });
else $('body,html').animate({ scrollTop: currElem.offset().top }, 2000,'swing',function(){
scrolled = false;
$(this).blur();
});
}
$('.currentLink').removeClass('currentLink');
$(this).addClass('currentLink');
});
}
});
Any suggestions how to resolve the "unsmooth scrolling" issue here? Is it maybe helpful do display the images as elements instead of background images?
Thanks for your help!
Kind regards
joschi81
Related
I am using a slider on my web page for that i used jQuery Function
to scroll down
jQuery("#downClick").click(function() {
jQuery("html, body").animate({ scrollTop: jQuery(document).height() }, "slow");
});
to scroll up
jQuery("#upClick").click(function(){ //Click event to scroll to top ==>> Slider
jQuery('html, body').animate({scrollTop : 0},800);
return false;
});
My page is having too much data to display, so when a person clicks on this buttons either he navigates to bottom or top in once.
Does anybody can suggest me how can i change to something like if i want to scroll up it will scroll up with multiple steps not in once.
$('#upClick').on('click', function() {
var scrollIndex = $(window).scrollTop(); // current page position
$(window).scrollTop(y - 150); // scroll up 150px
}
refer this!
i'am trying to make the airbnb.nl effect where a 'how it works' div appears from the top on button click. Then when you scroll down (or click the close button) it disappears again.
When the div is hide after scrolling to 630px the scrollbar shoots up so i've set the scrollbar to 0 at the same time. Problem is that it keeps repeating this 'scrollTop to 0' script when you scroll down further, making it a unwanted loop.
Any suggestions on how to only use this script (scrollTop -> 0) once, while the div is shown? Or maybe even prettier solutions? ;)
This is where it's live: www.energyguards.nl (and i disabled the scrollTop function there for now)
jQuery(document).on('click', '.flip', function(e){
e.preventDefault();
jQuery(".panel").slideToggle("slow");
});
$(window).scroll(function(){
if($(this).scrollTop() > 630) $('.panel').hide();
if($(this).scrollTop() > 630) $(window).scrollTop( 0 );
});
Hope to hear from you guys,
cheers Joeri
Check this DEMO out http://jsfiddle.net/yeyene/46o7chfu/1/
Hope you means like this.
JQUERY
$(document).ready(function () {
// scroll to top and show top content
$('#show_top_bar').on('click',function(){
$('html, body').stop().animate({
scrollTop: 0
}, 300, function() {
$('#top_bar').slideDown(300);
});
});
// hide top content on click close icon
$('#close_top_bar').on('click',function(){
$('#top_bar').slideUp(100);
});
});
$(window).scroll(function() {
// hide top content when scroll position is top of content
if($(this).scrollTop() > $('#content').position().top){
if($('#top_bar').css('display') !== 'none') {
$('#top_bar').slideUp(0);
$('html, body').stop().animate({
scrollTop: 0
}, 0 );
}
}
});
Can You help me please with a one thing I can't manage?
I have used scrolling-nav.js for the top menu on my website - Interior, Exterior etc. http://lukaszradwan.com/www_architect/services.php
Now I set the offset using this code
$(window).scroll(function() {
if ($(".navbar").offset().top > 130) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 130
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
But when you click for example to Exterior, active class is not working exactly at this position.
I tried to use method form another topic, but my "js" knowledge is poor. jquery scroll, change navigation active class as the page is scrolling, relative to sections
Thanks in advance.
Right now, active class is applied only when the top offset of section is 0. You can change it to other value like 130 using jquery. Add this code:
$(window).scroll(function(){
/* Get id of sections corresponding to top nav menu */
var scroll_sections = []
$('a.page-scroll').each(function(){
scroll_sections.push($(this).attr('href'));
})
for (i in scroll_sections)
{
/* Instead of 0, if the top position offset of section is 130 or less,
we add active class for that section in nav menu */
if ($(scroll_sections[i]).position().top <= $(window).scrollTop() + 130)
{
$('nav li.active').removeClass('active');
$('nav a').eq(i).parent().addClass('active');
}
}
});
I am building a full page slider that keeps the native scrollbar and allows the user to either free scroll, use the mouse wheel or navigation dots (on the left) to switch to a slide.
Once the user is on the last slide and tries to scroll down further, the whole slider moves up to reveal a simple scrollable section. If the user scrolls down and then tries to go back up, then this new section moves out of the way again and returns the slider back into view.
Fiddle: http://jsfiddle.net/3odc8zmx/
The parts I'm struggling with:
Only the first two navigation dots work. The third one DOES WORK if you area looking at the first slide. But doesn't do anything, if you are on slide 2. Note: the purple one is a short-cut to the second section of the page and not related to the slider.
When moving to the last slide (via the dots, if you're on the first slide) it causes the code to make the whole slider move upwards as it sees this as the user has slid past the last slide as per the description above. I have tried to combat this using a variable called listen to stop the scroll event listening when using the showSlide method... but it seems to be true even though I set it to false, and only reset it to true again after the animation...
When scrolling down using the mouse wheel, I can get to the second section and back up, but not to the first third section. I'm wondering if I could use the showSlide method to better handle this instead of the current dirty next and prev functions I have implemented.
Note: If the user has free-scrolled, when they use the mouse-wheel, I want the slider to snap to the nearest slide to correct itself... Any suggestions for how I could do this?
Can anyone offer some help?
Here's the JS:
var listen = true;
function nextSlide()
{
$('#section1').stop(true,false).animate({
scrollTop: $('#section1').scrollTop() + $(window).height()
});
}
function prevSlide()
{
$('#section1').stop(true,false).animate({
scrollTop: -$('#section1').scrollTop() + $(window).height()
});
}
function showSlide(index)
{
var offset = $('#section1 div').eq(index).offset();
offset = offset.top;
if(offset){
listen = false;
$('.slide-dot').removeClass('active');
$('.slide-dot').eq(index).addClass('active');
$('#section1').stop(true,false).animate({
scrollTop: offset
}, 500, function(){
listen = true;
});
} else {
alert('error');
}
}
$(document).ready(function(){
var fullHeight = 0;
$('#section1 div').each(function(){
fullHeight = fullHeight + $(this).height();
});
var lastScrollTop1 = 0;
$('#section1').on('scroll', function(e){
var st = $(this).scrollTop();
if (st > lastScrollTop1){
if( $('#section1').scrollTop() + $(window).height() == fullHeight) {
if(listen){
$('body').addClass('shifted');
}
}
}
lastScrollTop1 = st;
});
$('#section1').on('mousewheel', function(e){
e.preventDefault();
var st = $(this).scrollTop();
if (st > lastScrollTop1){
nextSlide();
} else {
prevSlide();
}
});
var lastScrollTop2 = 0;
$('#section2').on('scroll', function(e){
var st = $(this).scrollTop();
if (st > lastScrollTop1){
} else {
if( st == 0 ){
$('body').removeClass('shifted');
}
}
lastScrollTop1 = st;
});
$('.slide-dots').css({'margin-top':-$('.slide-dots').height() / 2});
$('.slide-dot').first().addClass('active');
$(document).on('click', '.slide-dot', function(e){
e.preventDefault();
showSlide( $(this).index() );
});
$(document).on('click', '.slide-dot-fake', function(e){
e.preventDefault();
$('body').addClass('shifted');
});
});
And for those wondering why I'm not using something like fullPage.js, it's because it can't handle the way I want to transition between the two areas and have two scrollbars (one for each area).
You can use:
e.originalEvent.wheelDelta
instead of:
st > lastScrollTop1
in the mousewheel event for your third problem to check if the user has scrolled up or down. And also change the +/- in prevSlide. I used dm4web's fiddle for your first problem. And I used:
scrollTop: offset - 1
instead of:
scrollTop: offset
for your second problem, because when the scroll reaches to the last pixel of the third element, it automatically goes to the next section, so 1 pixel is enough for it not to.
Here's the fiddle: http://jsfiddle.net/3odc8zmx/3/
As suggested by #chdltest, you could do it by using fullPage.js.
Here's an example. Go to the last section.
Code used for the example:
Javascript
$('#fullpage').fullpage({
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
scrollOverflow: true,
scrollBar: true,
afterLoad: function (anchor, index) {
//hiding the main scroll bar
if (index == 4) {
$('body, html').css('overflow', 'hidden');
}
//showing the main scroll bar
if (index == 3) {
$('body, html').css('overflow', 'visible');
}
}
});
CSS (in case you prefer to use the normal style for it)
/* Normal style scroll bar
* --------------------------------------- */
.slimScrollBar {
display: none !important;
}
.fp-scrollable {
overflow: auto !important;
}
Advantages of using fullPage.js instead to your own code:
Strongly tested in different devices and browsers. (IE, Opera, Safari, Chrome, Firefox..)
Prevent problems with trackpads, Apple laptops trackpads or Apple Magic Mouse.
Old browser's compatibility, such as IE 8, Opera 12...
Touch devices compatibility (IE Windows Phone, Android, Apple iOS, touch desktops...)
It provides many other useful options and callbacks.
I want to scroll effect like these pages
http://www.hugeinc.com/ (After three slide) - http://stadiumtechcenter.com/building
For example I have a slider area and when I scroll down it's going to menu. After that standart content block is starting. Now I want to when I scroll up and menu reach the browser top site automaticly jump to page top.
$(window).scroll(function(){
var scrollTop = $(window).scrollTop(),
divOffset = $('.bottom').offset().top,
dist = divOffset - scrollTop;
if (dist > 0) {
$('html, body').stop().animate({'scrollTop':$('.top').offset().top}, 300);
}
});
Here is the fiddle
http://jsfiddle.net/zB5bc/
Maybe you can try something like this:
$(window).on('mousewheel', function(e){
if(e.originalEvent.wheelDelta < 0){
$('html, body').stop().animate({'scrollTop':$('.bottom').offset().top}, 300);
}
else{
$('html, body').stop().animate({'scrollTop':$('.top').offset().top}, 300);
}
Here is working example: http://jsfiddle.net/zB5bc/4/