对联嵌套代码滚动有限制

最新推荐文章于 2021-07-19 20:05:30 发布

原创最新推荐文章于 2021-07-19 20:05:30 发布 · 358 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#scroll #scrollTop

AJAX/jQuery/Js 专栏收录该内容

4 篇文章

订阅专栏

这段代码展示了如何使用JavaScript和CSS实现对联广告在页面滚动时的定位效果。当页面滚动超过特定位置时，广告固定在顶部；当滚动回到特定范围时，恢复其原始位置。点击广告的关闭按钮可以隐藏广告。主要涉及的技术点包括滚动事件监听、CSS定位和jQuery操作DOM。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
#lovexin1 a,#lovexin2 a{ font-size:16px; color:#888;font-family: Kalinga;text-align:right}
</style>
<DIV id="lovexin1" style='Z-INDEX: 10; LEFT: 0; POSITION: absolute; TOP: 165px; width: 205; height: 570px; display:none'><img src='http://nc.infang.com/AD/duil220r.jpg' width='205' height='570' border='0'><br><a href="javascript:void(0)" onClick="onYC();">x</a></DIV>
<DIV id="lovexin2" style='Z-INDEX: 10; right: 0; POSITION: absolute; TOP: 165px; width: 205; height: 570px; display:none'><img src='http://nc.infang.com/AD/duil220.jpg' width='205' height='570' border='0'><br><a href="javascript:void(0)" onClick="onYC2();">x</a></DIV>


    function duil(){
        var doc = $(document);
        $("#lovexin1").css("display","block");
        $("#lovexin2").css("display","block");
        doc.scroll(function(){
            if(doc.scrollTop() > 166 && doc.scrollTop() < 1360 ){
                $("#lovexin1").css({"position":"fixed","top":0});
                $("#lovexin2").css({"position":"fixed","top":0})
            }else if(doc.scrollTop() >= 1360){
                $("#lovexin1").css({"position":"absolute","top":"1360px"});
                $("#lovexin2").css({"position":"absolute","top":"1360px"})
            }else{
                $("#lovexin1").css({"position":"absolute","top":"165px"});
                $("#lovexin2").css({"position":"absolute","top":"165px"})
            };
        });
    }
    function onYC(){
        $("#lovexin1").hide();
    }
    function onYC2(){
        $("#lovexin2").hide();