[英]I want a div to scroll at the bottom of the page when the user scrolls
I can't use bootstrap for this i can use jquery 我不能为此使用引导程序,可以使用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 例如: 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>
I have used jquery and media queries for this to work. 我已经使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.