I want a div to scroll at the bottom of the page when the user scrolls

Question

I can't use bootstrap for this i can use jquery

I have basic page with a container which has a button and some paragraph I want to move this at the bottom on the page when the user scrolls

Also this should only happen in a mobile view.

example: https://creditcards.chase.com/a1/marriottpremier/8TK?CELL=679Z&nck=120931994&ck=1213078&lk=1000160171

They used bootstrap

<div>
<h2>Near<h2>
<div>
<button>Learn more<button>
<p>conditions<p>
<div>

Rather than simply put a "requirement" please post what you have tried so that we can help you. — Mark Schultheiss, Mar 08 '16 at 17:14
I think you want to use a 'sticky' div, see http://stackoverflow.com/questions/2907367/have-a-div-cling-to-top-of-screen-if-scrolled-down-past-it for some ideas — r8n5n, Mar 08 '16 at 17:15
Possible duplicate of [How can I make a div stick to the top of the screen once it's been scrolled to?](http://stackoverflow.com/questions/1216114/how-can-i-make-a-div-stick-to-the-top-of-the-screen-once-its-been-scrolled-to) — Mark Schultheiss, Mar 08 '16 at 17:16
i am still working on it @Mark Schultheiss everybody is using bootsrap which i am not allowed to the div should be at the bottom of the screen when the user scroll. — Insane Fragger, Mar 08 '16 at 17:18
http://stackoverflow.com/questions/8824831/make-div-stay-at-bottom-of-pages-content-all-the-time-even-when-there-are-scrol — Mark Schultheiss, Mar 08 '16 at 17:36
There are a good number of bootstrap questions out there, but if you leave the bootstrap tag off your question, it is unlikely someone will provide an answer that requires it. — sm1215, Mar 08 '16 at 22:39
got this working by using Jquery scrollPos = jQuery(window).scrollTop(); — Insane Fragger, Mar 09 '16 at 20:01

score 0 · Answer 1 · answered Mar 09 '16 at 20:03

I have used jquery and media queries for this to work.

CSS
@media only screen and (max-width: 380px) {


    .fixed {
        bottom: 0;
        position: fixed;
        left: 0;
        width: 100%;
        max-width: 374px;
        margin: 0 auto;
        background-color: blue;
        height: 70px;

        }
    }


JQuery

<script>
jQuery(document).ready(function() {

// define variables
var navOffset, scrollPos = 0;

// add utility wrapper elements for positioning
jQuery("nav").wrap('<div class="button1"></div>');
jQuery("nav").wrapInner('<div class="inner"></div>');
jQuery(".nav-inner").wrapInner('<div class="inner-most"></div>');

// function to run on page load and window resize
function stickyUtility() {

// only update navOffset if it is not currently using fixed position
if (!jQuery("nav").hasClass("fixed")) {
navOffset = jQuery("nav").offset().top;
}

// apply matching height to nav wrapper div to avoid awkward content jumps
jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());

} // end stickyUtility function

// run on page load
stickyUtility();

// run on window resize
jQuery(window).resize(function() {
stickyUtility();
});

// run on scroll event
jQuery(window).scroll(function() {

scrollPos = jQuery(window).scrollTop();

if (scrollPos >= navOffset) {
jQuery("nav").addClass("fixed");
} else {
jQuery("nav").removeClass("fixed");
}

});

});
</script>

I want a div to scroll at the bottom of the page when the user scrolls

1 Answers1