求助:如果使用js\jq 控制一个div 当滚动到页面顶部的时候固定在顶部，离开可继续滚动

Posted 2023-04-12

求助:如果使用js\jq 控制一个div 当滚动到页面顶部的时候固定在顶部，离开可继续滚动【希望能兼容所有浏览器】

1、新建html文档。

2、书写hmtl代码<div class="box">    <!--代码开始--><div class="main"></div><div class="sub"><div class="sub01"></div><div class="sub01"></div><div class="fixed">我是固定的哟</div></div><!--代码结束--></div>。

3、书写css代码。<style type="text/css">**padding:0px;margin:0px;.boxwidth:1000px;

;background:#ccc;margin:0 auto;overflow:hidden;.mainwidth:770px;height:3000px;。

;background:#000;float:left;.subwidth:220px;background:#FC6;float:right;.。

4、sub01width:220px;height:100px;background:#0CC;margin-bottom:10px;.fixed

width:220px;height:300px;background:#F66;font:normal 13px/30px \\5FAE\\8F6F\\96C5\\

9ED1;text-align:center;top:10px;</style>。

5、书写并添加js代码。<script src="js/jquery.js"></script>。这就完成了。

参考技术A 代码：
•$(function()

•//获取要定位元素距离浏览器顶部的距离

•var navH = $(".nav").offset().top;

•//滚动条事件

•$(window).scroll(function()

•//获取滚动条的滑动距离

•var scroH = $(this).scrollTop();

•//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定

•if(scroH>=navH)

•$(".nav").css("position":"fixed","top":0);

•else if(scroH<navH)

•$(".nav").css("position":"static");

•

•)

•) 参考技术B 怎么发给你？

js判断一个div的图片数量(最多三张),根据数量控制图片的css样式，如下图

参考技术A 这个就是传说中的自适应了，所谓自适应就是，网页根据用户的图片大小或者这个硬件设备进行动态改变自己的样式，建议看一下阮一峰写的自适应文章，百度搜索就可以找到了，看完就知道如何设置以及自适应是什么了 参考技术B 用jq判断是否存在图片以及图片数量，赋值不同的css样式就可以了本回答被提问者采纳 参考技术C 请问，这个问题您解决了吗？我也想要这个效果。