我想一个div在页面底部滚动，当用户滚动

我不能使用自举为了这个，我可以使用jQuery我想一个div在页面底部滚动，当用户滚动

我有基本的页面，其中有一个按钮和一些段落的容器当用户滚动时，我想将其移动到页面底部

此外，这应该只发生在移动视图中。

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

他们用引导

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

来源

2016-03-08 Insane Fragger

而不是简单地提出一个“要求”，请发布你已经尝试过，以便我们可以帮助你。 –

我想你想使用'粘'div，请参阅http://stackoverflow.com/questions/2907367/have-a-div-cling-to-top-of-screen-if-scrolled-down-past-它的一些想法 – r8n5n

可能的重复[如何使一个div粘到屏幕的顶部，一旦它被滚动到？]（http://stackoverflow.com/questions/1216114/how-can-i-make-一个div-stick-to-the-the-screen-once-its-been-scroll-to） –

我已经使用jQuery和媒体查询这个工作。

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>

来源

2016-03-09 20:03:36

我想一个div在页面底部滚动，当用户滚动

回答

相关问题