滑动状态栏固定

最新推荐文章于 2023-04-28 11:33:11 发布

cjx177187

最新推荐文章于 2023-04-28 11:33:11 发布

阅读量249

点赞数 1

分类专栏： DOM操作文章标签： JavaScript DOM操作滚动事件 position:fixed 网页布局

本文链接：https://blog.csdn.net/cjx177187/article/details/125922222

版权

DOM操作专栏收录该内容

21 篇文章 0 订阅

订阅专栏

搜索栏固定

利用给document绑定scroll事件，判断输入框通过滑动到浏览器窗口顶部的距离来给input所在的盒子添加position="fixed"属性，使其固定在浏览器窗口顶部

<body>

<ul>

中国大陆

<span>

</svg>

</span>

<ul>

</ul>

</div>

</a></li>

<li><a href="">手机逛淘宝</a></li>

<li><a href="">网页无障碍</a></li>

</ul>

</div>

<ul>

我的淘宝

<span>

</svg>

</span>

<ul>

<li>已买到的宝贝</li>

</ul>

</div>

</a></li>

<span>

</svg>

</span>

购物车

</a></li>

<span>

</svg>

</span>

收藏夹

<span>

</svg>

</span>

<ul>

<li>收藏的宝贝</li>

<li>收藏的店铺</li>

</ul>

</div>

</a></li>

千牛卖家中心

<span>

</svg>

</span>

<ul>

<li>已卖出的宝贝</li>

<li>出售中的宝贝</li>

<li>卖家服务市场</li>

<li>卖家服务中心</li>

</ul>

</div>

</a></li>

联系客服

<span>

</svg>

</span>

<ul>

<li>消费者客服</li>

</ul>

</div>

</a></li>

</ul>

</div>

</header>

</div>

<ul>

<li>新款连衣裙</li>

<li>行车记录仪</li>

</ul>

</div>

下载淘宝

</div>

</section>

</body>

document.onscroll=function(el){

var input=document.querySelector(".content-input")

//获取窗口的滑动距离

var top2=document.documentElement.scrollTop

//判断滑动距离与input框到窗口顶部的距离

if(top2>=85){

//给input框设置fixed属性，使其固定

input.style.position="fixed"

input.style.top="0px"

}

else{

input.style.position="absolute"

}

</script>

cjx177187

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
滑动状态栏固定

利用给document绑定scroll事件，判断输入框通过滑动到浏览器窗口顶部的距离来给input所在的盒子添加。"../../homework/项目/pc端/img4/iconfont.js"//判断滑动距离与input框到窗口顶部的距离。//给input框设置fixed属性，使其固定。"请输入你想要的宝贝...."属性，使其固定在浏览器窗口顶部。--导航栏-左侧-->--导航栏-右侧-->--左边图片-->--右边图片-->--多选框-->--搜索框-->--输入框-->...
复制链接

扫一扫

专栏目录