水平滚动页脚是否有其他选择？

Question

I am creating a layout for a client in which the footer is an image and will scroll horizontally while the content remains scrolling vertically.

Right now I am using a scroll event to get the value of the how many pixels the user scrolled and translating the "background-position-x" value by that number of pixels.

I have a fiddle https://jsfiddle.net/DaveS_92/Ln8dwj2k/12/ to show an example of my code (I can't use actual content/images from the client, but conceptually it's the same).

var scrollValue = 0;
var bg = $('#footer');
var bgCurrentXPosition = parseInt($('#footer').css('background-position-x'), 10);

$(window).scroll(function(event){
    var bgCurrentXPosition = parseInt($('#footer').css('background-position-x'), 10);
    var scrolled = $(document).scrollTop() - scrollValue;
    scrollValue = $(document).scrollTop();
    console.log("The value scrolled was " + scrolled);

    var bgUpdateXPosition = (bgCurrentXPosition - scrolled);
    console.log(bgUpdateXPosition);

    bgCurrentXPosition = $('#footer').css('background-position-x', bgUpdateXPosition);

    $('#footer').css('background-position-x', bgUpdateXPosition);
});

My problem is how choppy it is on mobile, Android specifically. Also that it cuts off the end of the background-image instead of repeating like it does on desktop. So my question, is there an alternative way I could be doing this that might help with scrolling?

Answer 1

You can fix it using simple js $('#footer').css('background-position-x', -$(document).scrollTop());

I have added all the Section in one Div and kept footer outside. And added padding of footer size to the main div. That will allow you to scroll till end.

See the Snippet below:

 // var scrollTimeout = false; $(window).scroll(function(event){ /* Clear it so the function only triggers when scroll events have stopped firing*/ // clearTimeout(scrollTimeout); /* Set it so it fires after a second, but gets cleared after a new triggered event*/ $('#footer').css('background-position-x', -$(document).scrollTop()); }); 

 #footer { height: 140px; background-image: url(https://d3zr9vspdnjxi.cloudfront.net/artistInfo/thomvint/thumb/607.jpg?0); background-position-x: 0px; position: fixed; bottom: 0; width: 100%; background-size: cover; background-repeat: repeat-x; } .main-container{ padding-bottom: 140px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main-container"> <section> <div class="container white-bg"> <h1>Section 1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sem accumsan, tincidunt lectus ac, pellentesque est. In convallis ligula id laoreet porta. Suspendisse ligula odio, blandit at dolor in, interdum sodales libero. Nullam et purus in odio tristique auctor non in libero. Nulla orci mauris, elementum eget hendrerit nec, malesuada ut augue. Nam at libero sit amet sapien hendrerit eleifend a eu est. Duis sollicitudin, erat a interdum sodales, arcu nulla euismod quam, eget imperdiet magna ligula sit amet dui. Mauris ut mi eu sem varius tincidunt id non odio.<p> </div> </section> <section> <div class="container white-bg"> <h1>Section 2</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sem accumsan, tincidunt lectus ac, pellentesque est. In convallis ligula id laoreet porta. Suspendisse ligula odio, blandit at dolor in, interdum sodales libero. Nullam et purus in odio tristique auctor non in libero. Nulla orci mauris, elementum eget hendrerit nec, malesuada ut augue. Nam at libero sit amet sapien hendrerit eleifend a eu est. Duis sollicitudin, erat a interdum sodales, arcu nulla euismod quam, eget imperdiet magna ligula sit amet dui. Mauris ut mi eu sem varius tincidunt id non odio.<p> </div> </section> <section> <div class="container white-bg"> <h1>Section 3</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sem accumsan, tincidunt lectus ac, pellentesque est. In convallis ligula id laoreet porta. Suspendisse ligula odio, blandit at dolor in, interdum sodales libero. Nullam et purus in odio tristique auctor non in libero. Nulla orci mauris, elementum eget hendrerit nec, malesuada ut augue. Nam at libero sit amet sapien hendrerit eleifend a eu est. Duis sollicitudin, erat a interdum sodales, arcu nulla euismod quam, eget imperdiet magna ligula sit amet dui. Mauris ut mi eu sem varius tincidunt id non odio.<p> </div> </section> <section> <div class="container white-bg"> <h1>Section 4</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sem accumsan, tincidunt lectus ac, pellentesque est. In convallis ligula id laoreet porta. Suspendisse ligula odio, blandit at dolor in, interdum sodales libero. Nullam et purus in odio tristique auctor non in libero. Nulla orci mauris, elementum eget hendrerit nec, malesuada ut augue. Nam at libero sit amet sapien hendrerit eleifend a eu est. Duis sollicitudin, erat a interdum sodales, arcu nulla euismod quam, eget imperdiet magna ligula sit amet dui. Mauris ut mi eu sem varius tincidunt id non odio.<p> </div> </section> <section> <div class="container white-bg"> <h1>Section 5</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sem accumsan, tincidunt lectus ac, pellentesque est. In convallis ligula id laoreet porta. Suspendisse ligula odio, blandit at dolor in, interdum sodales libero. Nullam et purus in odio tristique auctor non in libero. Nulla orci mauris, elementum eget hendrerit nec, malesuada ut augue. Nam at libero sit amet sapien hendrerit eleifend a eu est. Duis sollicitudin, erat a interdum sodales, arcu nulla euismod quam, eget imperdiet magna ligula sit amet dui. Mauris ut mi eu sem varius tincidunt id non odio.<p> </div> </section> <section> <div class="container white-bg"> <h1>Section 6</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sem accumsan, tincidunt lectus ac, pellentesque est. In convallis ligula id laoreet porta. Suspendisse ligula odio, blandit at dolor in, interdum sodales libero. Nullam et purus in odio tristique auctor non in libero. Nulla orci mauris, elementum eget hendrerit nec, malesuada ut augue. Nam at libero sit amet sapien hendrerit eleifend a eu est. Duis sollicitudin, erat a interdum sodales, arcu nulla euismod quam, eget imperdiet magna ligula sit amet dui. Mauris ut mi eu sem varius tincidunt id non odio.<p> </div> </section> <section> <div class="container white-bg"> <h1>Section 7</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sem accumsan, tincidunt lectus ac, pellentesque est. In convallis ligula id laoreet porta. Suspendisse ligula odio, blandit at dolor in, interdum sodales libero. Nullam et purus in odio tristique auctor non in libero. Nulla orci mauris, elementum eget hendrerit nec, malesuada ut augue. Nam at libero sit amet sapien hendrerit eleifend a eu est. Duis sollicitudin, erat a interdum sodales, arcu nulla euismod quam, eget imperdiet magna ligula sit amet dui. Mauris ut mi eu sem varius tincidunt id non odio.<p> </div> </section> <section> <div class="container white-bg"> <h1>Section 8</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sem accumsan, tincidunt lectus ac, pellentesque est. In convallis ligula id laoreet porta. Suspendisse ligula odio, blandit at dolor in, interdum sodales libero. Nullam et purus in odio tristique auctor non in libero. Nulla orci mauris, elementum eget hendrerit nec, malesuada ut augue. Nam at libero sit amet sapien hendrerit eleifend a eu est. Duis sollicitudin, erat a interdum sodales, arcu nulla euismod quam, eget imperdiet magna ligula sit amet dui. Mauris ut mi eu sem varius tincidunt id non odio.<p> </div> </section> <section> <div class="container white-bg"> <h1>Section 9</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sem accumsan, tincidunt lectus ac, pellentesque est. In convallis ligula id laoreet porta. Suspendisse ligula odio, blandit at dolor in, interdum sodales libero. Nullam et purus in odio tristique auctor non in libero. Nulla orci mauris, elementum eget hendrerit nec, malesuada ut augue. Nam at libero sit amet sapien hendrerit eleifend a eu est. Duis sollicitudin, erat a interdum sodales, arcu nulla euismod quam, eget imperdiet magna ligula sit amet dui. Mauris ut mi eu sem varius tincidunt id non odio.<p> </div> </section> <section> <div class="container white-bg"> <h1>Section 10</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id sem accumsan, tincidunt lectus ac, pellentesque est. In convallis ligula id laoreet porta. Suspendisse ligula odio, blandit at dolor in, interdum sodales libero. Nullam et purus in odio tristique auctor non in libero. Nulla orci mauris, elementum eget hendrerit nec, malesuada ut augue. Nam at libero sit amet sapien hendrerit eleifend a eu est. Duis sollicitudin, erat a interdum sodales, arcu nulla euismod quam, eget imperdiet magna ligula sit amet dui. Mauris ut mi eu sem varius tincidunt id non odio.<p> </div> </section> </div> <section id="footer">&nbsp;</section> 

You can test it here also