Javascript 当用户滚动时,我想在页面底部滚动一个div

Javascript 当用户滚动时,我想在页面底部滚动一个div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我不能为此使用引导,我可以使用jquery 我有一个容器的基本页面,其中有一个按钮和一些段落 我想在用户滚动时将其移动到页面底部 而且,这应该只在移动视图中发生 例如: 他们使用了引导程序 <div> <h2>Near<h2> <div> <button>Learn more<button> <p>conditions<p> <div> 近的 了解更多 条件 我使用jquery和媒体查

我不能为此使用引导,我可以使用jquery

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

而且,这应该只在移动视图中发生

例如:

他们使用了引导程序

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

近的
了解更多
条件

我使用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>
CSS
@仅介质屏幕和(最大宽度:380px){
.固定{
底部:0;
位置:固定;
左:0;
宽度:100%;
最大宽度:374px;
保证金:0自动;
背景颜色:蓝色;
高度:70像素;
}
}
JQuery
jQuery(文档).ready(函数(){
//定义变量
var navOffset,scrollPos=0;
//添加用于定位的实用工具包装器元素
jQuery(“nav”).wrap(“”);
jQuery(“nav”)。wrapInner(“”);
jQuery(“.nav-inner”).wrapInner(“”);
//用于在页面加载和窗口大小调整时运行的函数
函数stickyUtility(){
//仅在当前未使用固定位置时更新navOffset
如果(!jQuery(“nav”).hasClass(“固定”)){
navOffset=jQuery(“nav”).offset().top;
}
//将匹配高度应用于导航包装div,以避免内容跳转
jQuery(“.nav占位符”).height(jQuery(“nav”).outerHeight());
}//end stickyUtility函数
//在页面加载时运行
粘性效用();
//运行时调整窗口大小
jQuery(窗口).resize(函数(){
粘性效用();
});
//滚动运行事件
jQuery(窗口).滚动(函数(){
scrollPos=jQuery(窗口).scrollTop();
如果(滚动位置>=导航偏移){
jQuery(“nav”).addClass(“固定”);
}否则{
jQuery(“nav”)。removeClass(“固定”);
}
});
});

不要简单地提出“要求”,请发布您尝试过的内容,以便我们可以帮助您。我想您想要使用“粘性”div,请参阅一些想法。Mark Schultheis每个人都在使用bootsrap,当用户滚动时,div应该位于屏幕底部。