怎么让图片开始相对div固定,滚动后相对屏幕固定
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{margin: 0 auto;}
        .head{position: relative;height: 100px;background: red;}
        .body{position: relative;height: 2000px;}
        .class02,.class03{border: 1px solid #333333;height: 100%;position: relative;}
        .class02{float: left;}
        .class02{width: 880px;}
        .class03{float: right;width: 15%;margin-right: 8%;}
        .img{display: block;width: 46px;}
        #img01{position: absolute;top: 10px;left: -55px;}
        #img{background-image: url("bb.png");display: block;width: 46px;height: 46px;}
    </style>

</head>
<body>
<div class="head"></div>
<div class="body">
    <div style="margin: 0 auto;height: 100%;width: 1240px;">
    <div class="class02">
        <div class="img" id="img01">
            <div>
                <a href="#" id="img"></a>
            </div>
        </div>
    </div>
    <div class="class03"></div>
    </div>
</div>
<script src="/js.js"></script>
</body>
</html>









function navPos(){
    var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    if(scrollTop>165){
      $(".art-c-side").css({"position":"fixed","top":"10px","left":"-55px"});     
      }
        else{
            $(".art-c-side").css({"position":"absolute","top":"10px","left":"-55px"});
        }
}


图片说明


图片说明


图片说明

类似于LOL更新详情

2个回答

相对div定位,然后根据滚动高度进行其他操作,修改样式

$(document).scroll(function () {
    var scroH = $(document).scrollTop();
    if (scroH > 30) {
        $("xxx").addClass("xxx");
    } else {
        $("xxx").removeClass("xxx");
    }
})




    <style>
        body{margin: 0 auto;}
        .head{position: relative;height: 100px;background: red;}
        .body{position: relative;height: 2000px;}
        .class02,.class03{border: 1px solid #333333;height: 100%;position: relative;}
        .class02{float: left;}
        .class02{width: 880px;}
        .class03{float: right;width: 15%;margin-right: 8%;}
        .img{display: block;width: 46px;}
        #img01{position: absolute;top: 10px;left: -55px;}
        #img{background:#000;display: block;width: 46px;height: 46px;}
        #img01.online{position:fixed;top:110px;left:50%;margin-left:-675px;}
    </style>

<div class="head"></div>
<div class="body">
    <div style="margin: 0 auto;height: 100%;width: 1240px;">
    <div class="class02">
        <div class="img" id="img01">
            <div>
                <a href="#" id="img"></a>
            </div>
        </div>
    </div>
    <div class="class03"></div>
    </div>
</div>

</body>
</html>
<script>
$(document).scroll(function () {
    var scroH = $(document).scrollTop();
    if (scroH > 30) {
        $("#img01").addClass("online");
    } else {
        $("#img01").removeClass("online");
    }
})

</script>

lengyue1212
lengyue1212 万分感谢大佬
3 个月之前 回复

给图片设置 position: sticky;top:10px

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
div + css 层的相对与固定
实例: <div class="relativeCls"> <!-- content --> <img border=0 src="image.jsp"> </div>样式: <style type="text/css"> <!-- 相对位置, 位置参数:top, bottom, left, right --> .relativeCls{ posit
两个窗体相对固定
大家好,我想做两个个窗体 像父子窗体那样,你任移动一个 另一个跟着移动,怎么做啊,
div层相对屏幕居中
没有研究过这个问题的朋友觉得很难,实际上原理很简单,主要记住以下3点就OK了。 1、先让这个DIV绝对定位. 2、让他距离上边50%,左边50%;这会这个DIV的左上角这个点就是窗口的正中间; 3、因为已经知道了这个DIV的高和宽了,那么再从这里点向左移动总宽及高的一半就可以了; 记住以上3个要点,来看个例子 以下是代码片段: [code=&quot;java&quot;] [/code]...
div固定不滚动
首先来看CSS代码 #gg{ margin:0 auto; width:100%; position:fixed;z-index:99;}  分析代码: position属性主要是规定了DIV的定位,主要有以下几个属性       属性值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 &quot;left&quot;...
滚动条滚动固定div
现在很多地方都可以看到这样的效果 例如:淘宝商品详情里,滚动条往下来拉的时候,商品详情和评价那个nav会固定,现在很多网站也都有这样类似的效果
相对滚动怎么修改
请问如何 修改下面的代码,使相对"相对这里" 滚动 而不是以左边为参考,谢谢rnrnrnrn ssssrnrnrn rn rn sssssrnrn rn rn rn 相对这里rn rnrnrnrnrnrnrnrnrnrnrn
屏幕滚动 固定导航栏
<script src="jquery-1.12.2.js"></script> <script> $(function () { $(window).scroll(function () { //获取页面卷曲出去的高度和.top的div的高度对比 if($(document).scrol
DIV固定屏幕
CSS固定DIV,不会随滚动条走动
win8 固定到开始屏幕
简单的增加一项鼠标右键菜单,将选定的图标固定到win8的开始屏幕,适合任何文件,也可以直接固定doc或者txt、exe文件的哦。
div固定悬浮(左侧、右侧、任意相对位置)
e宝账--帮助中心 function scrollx(p) { var d = document, dd = d.documentElement, db = d.body, w = window, o = d.getElementById(p.id), ie6 = /msie 6/i.test(navigator.userAgent), style, timer; i...
跟随屏幕滚动后固定导航到顶端
在浏览网站的时候看到许多不错的效果,比如导航栏滚动一定距离后固定到某一位置。最近做手机端的页面比较多,就想如果多个导航栏叠加能否也将导航栏固定在不同位置呢?其实代码很简单,只不过是一个思路,看一下实际效果:                         思路很简单,首先将页面整体结构确定下来,最外层套一个div是常识,然后就是导航和内容的分离。由于html整个文档默认从上到下渲染,而我们
求助:如果链接相对固定的地址?
a/pub.htm 是一个共同的页面rnrnb/*.htmrnb/c/d/*.htmrnc/*.htmrnc/a/g/*.htmrn等许多不同层目录下许多页面都要打开a/pub.htm的页面。我不想一个一个文件用../..的定位,不知是否有没有方法能够用一种相同的方法定位?请高手指教!
DIV 怎么获得相对位置?
要实现rnhttp://www.buy.com/dept/Books_Bestsellers_Online_Bookstore/106.htmlrn这里面的效果rn鼠标放上去后弹出一个DIVrnrn这是中间的一段代码rn rnrnBiographiesrnrn现在不知道完全实现,哪位朋友知道怎么实现的呢?最好贴个类似代码,或帮上面代码改完整rn谢谢
div怎么相对 td 定位
[img=https://img-bbs.csdn.net/upload/201412/03/1417538184_491468.png][/img]rnrnaaa,bbb都是table,怎么将dfdf那个DIV定位到红框位置,并且浮动在上层,不改变其他元素的位置。rnrn具体代码:rnrnrn rn rnrnrn rn dfdfrn rn rn aaa:rn rnrnrnrn bbb:rn rn rnrnrnrn rn aaa:rn rnrnrnrn bbb:rn rn rnrnrnrnrn
求门户网站两边的相对固定的广告条
求门户网站两边的相对固定的广告条,而且是在800*600自动消失,我找了好几天,没有自适应分辨率只有相对固定的,谁有代码给我个先,介绍网站看看也行
jsp表头相对固定的2种方法
利用css设置实现表头的固定效果,提供2种,一种横纵都可以固定,一种是单一固定横坐标
如何固定一组窗口的相对顺序?
比如,A,B,C三个窗口,A,在B上,B在C上,三个顺序,要固定.rn如何实现?rn多谢多谢.rnrn我用SetWindowPos,测试了好多次,也没搞定;rn但看到windows系统中,有些程序,是有这样的窗口的,相对顺序始终固定rn
如何做层的相对固定?????急,帮忙,谢谢!!!
我在15的显示器上做的层,相对位置还不错,但如果到17的显示器去看,相对位置发生了很大的变化,使网页很不好看,各位大侠,帮帮忙,该怎么解决呢?
相对便宜的获得固定ip地址的方法?
相对便宜的获得固定ip地址的方法?做主机托管?DDN?还是什么?
元素定位解析,相对,绝对,固定定位
1、首先什么是定位,定位分几种,有什么作用        1、针对html定位,其实跟div有模块的划分区块有异曲同工之妙,它是巧妙的运用元素之间的位置,以及父子元素的位置和在浏览器中的位置来巧妙的完成了位置的设定。        2、定位分为相对定位,绝对定位,固定定位        3、定位相对于浮动更灵活,并且所有的元素都可以采用定位 2、相对定位        position:...
【求助】页面求助 文本框相对固定
现在 有一个文本框和一个table 在同一个 (这是个弹出窗口,点击后弹出该DIV)rn由于table内很多行 所以导致弹出的窗口有垂直滚动条,当滚动条滚动时 文本框也会随之滚动rn希望可以做到只有table数据随之滚动,文本框在最上面固定 需要怎么做呢?[img=https://img-bbs.csdn.net/upload/201312/04/1386154864_745539.jpg][/img]rn[img=https://img-bbs.csdn.net/upload/201312/04/1386154899_744992.jpg][/img]
让图片保持相对宽高
响应式布局下,经常要让图片大小保持相对宽高比例不变,则可以这样: [code=&quot;java&quot;] .respond_img{ height:auto; width: 100%; } [/code] 如果添加max-width:100%和height:...
固定到开始屏幕 Pin To StartScreen
win10的回归的开始菜单整合了xp的开始菜单与win8中的Metro磁贴,个人非常喜欢这种设计 下午老大发现我们的程序在win10开始菜单的磁贴处并没有磁贴生成,于是搜了一下这方面的资料 了解了一下win10的开始菜单中几个概念, 其中左半部分为"StartMenu" 右半部分为"StartScreen",而并非先前认为的Menu 将自己的App钉在这里的功能描述为”Pin App
设置div相对位置
先看一下效果,就是上面是个只有下边框的input输入框!要做的是下面选择日期的DIV始终在input文本框正下方。 html代码: 具体DIV内容省略不写了 CSS样式: .jnNav { background: #FFFFFF; border: 1px solid #B1B1B1; overflow: hidden; position: a
DIV相对定位问题
rnrnrnrn rn rn teststseeeeeeeeeewrnrnrnrnrn rn rn rn rn rn rn teststseeeeeeeeeewrn Toolrn rnrn rnrnrnrnrn
DIV相对位置
[size=14px]一个GridView数据绑定后,鼠标放在它上面的一行,GirdView的旁边就会显示一个小框,小框显示鼠标放在GridView上当前行的信息,(小框是放在DIV里,动态显示是JAVASCRIPT实现,鼠标不放在GridView上,小框不显示),rnrn布局是用Table,一行两列 rn现在一个问题是鼠标不管放在GridView里哪一行,DIV总是在定好了的那个位置显示,想请教一下[color=#FF0000],怎样能让那个DIV能够动态的随着鼠标放在Gridview里的哪一行,在那一行的旁边显示。[/color][/size]
html+div相对屏幕居中
   第一点要求 :position:absolute     第二点要求 :left:50%;top:50%     第三点要求 :margin-left:-175px [ 也就是 -(350/2)] margin-top:-150px [ 也就是 -(300/2)]    第一点要求 :position:absolute     第二点要求
bootstrap---固定div/固定导航栏
在顶部固定 &lt;div class="navbar navbar-fixed-top"&gt; 要固定的html或者其他内容 &lt;/div&gt; 在底部固定 &lt;div class="navbar navbar-fixed-bottom"&gt; 要固定的html或者其他内容 &lt;/div&gt; ...
div大小固定,图片水平垂直居中
div大小固定,图片水平垂直居中 .thimgBox-lzh{ width:80px;height:80px;margin:auto;text-align:center; vertical-align: middle; text-align: center; position: relative; } .imgBox-lzh{ width: auto;...
我在页面中放了个DIV层,想让这个DIV的位置始终相对屏幕在固定的位置
我在页面中放了个DIV层,想让这个DIV的位置始终相对屏幕在固定的位置,rn我是rn rn但是这个在显示器分辨率发生变化后,明显位置发生了变化,这个该怎么办??
div滚动至顶部之后固定的方法
个人博客文章链接:http://www.huqj.top/article?id=146 在浏览网页的时候,经常会看到这种效果:导航栏向上滚动到浏览器顶部之后就固定在顶部不再往上,而向下滚动回来的时候又跟着原来的布局下去(可以参考本博客的导航栏效果)。 效果图片如下: 滚动到顶端之后:   实现的方式可以是通过jquery注册滚动事件,在事件中判断导航栏到顶部的距离,如果小于等于0...
怎么取到子div的相对父元素高度
我有一div,定死高度,设置有垂直滚动条。 内部动态添加内容,都是 div 的有id.我随便取一个内部的div对象,如何取得他相对父div顶部距离? 我想做个页面load时读取参数,然后设置滚动条到指定的对象显示!
div在浏览器滚动的时候在顶部固定
效果图 实现思路: 获取div在浏览器的绝对位置,在监听浏览器滚动,通过判断滚动的距离,来设置这个div的position属性:相对浏览器定位,还是相对父容器定位。 js // div滚动到浏览器头部固定 var tab_top = $('.tab-list-contain').offset().top-$('#myTab2').height()
DIV怎么相对顶层框架定位?
有这样一个页面,页面包含三个框架:rnrn rn rn rnrn在frame3中有一个div,如何才能让div相对name="test"的frameset绝对定位,而不是相对frame3定位?
如何让一个固定大小的窗口位与屏幕中央(相对任务栏)
有一个固定大小的窗体如何让它无论在任何分辨率下都左右相对屏幕边界,上下相对上屏幕边界和开始菜单任务栏边界居中?
DIV如何定义相对位置
使用 可以定义绝对位置,但在不同的分辨率下显示的位置不同,能否使他的位置是相对的;这样可以在不同的分辨率下显示的位置都正确;rn
两个DIV的相对位置(右上角)
NULL 博文链接:https://shihuan830619.iteye.com/blog/1036116
在线跪求,div相对定位问题
不管什么方面我都很菜,跪求前辈们帮忙。现在要把下面这个divrn[code=HTML]rn rn 网站封测中rnrn[/code]rn定到下面这个的下面rn[code=HTML]rn rn rn 欢迎光临一元利, [登录 | 免费注册]rn rn 我的一元利收藏 | 会员中心 | 提提意见 | 新手帮助rn rn rn rnrn[/code]rn当点“登录”“免费注册”“会员中心”的时候在正下方出现上面的那个div,怎么定位呢?还要兼容ie6、7、8和ff,跪求各位前辈了。原来用鼠标点击出现悬浮,老板说不行,要在每个下面弄个div。rn我们的网址:http://u.001li.com/index.phprn下面的“收藏”、“评论”也都是在下面显示那个。拜托大家了。
javascrip 浮动在屏幕固定位置的div
比如做购物车的时候,提示用户购买状况,东西很好用
固定高度的div在屏幕中居中方法
如何将一个固定高度的div居中在屏幕中间呢? 先来看个例子,定义一个div并设置其高度为600px; html代码:&lt;div class='a'&gt;&lt;/div&gt;css样式代码:.a{ height:600px; background-color:#333; }让div一直待在屏幕中间其实很简单,只需要在css代码中加上短短几句.a{ height:600px; ba
相关热词 c# 标准差 计算 c#siki第五季 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池

相似问题