javascript - jquery 滚动限制。？-6ren

javascript - jquery 滚动限制。？

转载作者：太空宇宙更新时间：2023-11-03 23:48:23

26

4

这里我试图让我的两个 id 的 #stop,#stop2 即使在滚动后也能固定，并让我的 #stop3 滚动到它到达 #footer 一旦它到达 #footer 两个 #stop, #stop2 应该停止滚动。在我的这里如果 #stop,#stop2 都滚动到 #footer 这不应该发生，我不知道我哪里错了，任何已接受帮助。提前致谢。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    .one{width:100px;border:1px solid #CCC;height:200px;float:left;margin:0px 20px;background:#F00;}
    .footer{width:100%;height:800px;background:#339;clear:both;}
    </style>
    </head>

    <body>

    <div class="scroller_anchor"></div>
    <div id="stop" class="one"></div>
    <div class="one" id="stop3" style="height:2000px;">

    </div>
    <div id="stop2" class="one"></div>
    <div class="scroller_anchor1"></div>
    <div class="footer" id="footer"></div>
    </body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(window).scroll(function(e) {

        var scroller_anchor = $(".scroller_anchor").offset().top;
        var scroller_anchor1 = $(".scroller_anchor1").offset().top;
        if ($(this).scrollTop() >= scroller_anchor && $("#stop,#stop2").css('position') != 'fixed') 
        {    
           $('#stop,#stop2').css({
                'position': 'fixed',
                'top': '0px'
            });
            $('#stop').css({
                'left':'4%'

            });
            $('#stop2').css({
                'right':'2%'
            });
            $('#stop3').css({
                'left':'16.6%'
            });

            $('.scroller_anchor').css('height', '50px');
        } 

         else if ($(this).scrollTop() > scroller_anchor1 && $('#stop,#stop2').css('position') != 'relative' ) 
        {   
          $('#stop,#stop2,#stop3').css({
                'position': 'relative',
                'left':'inherit',
                'right':'inherit'

            });
        }
        else if ($(this).scrollTop() < scroller_anchor && $('#stop,#stop2').css('position') != 'relative' ) 
        {   
            $('.scroller_anchor').css('height', '0px');
          $('#stop,#stop2,#stop3').css({

                'position': 'relative',
                'left':'inherit',
                'right':'inherit'

            });
        }



    });

    </script>
    </html>

这是我的 fiddle jsfiddle.net/xPdD7

最佳答案

出于测试目的，我已经稍微修改了您的 js 代码，但所有硬编码值都可以根据您的特定需求进行更改:

  $(window).scroll(function(e) {

        var scroller_anchor = $(".scroller_anchor").offset().top;
        var scroller_anchor1 = $(".scroller_anchor1").offset().top;
        var footer = $(".footer").offset().top;
        if ($(this).scrollTop() >= scroller_anchor && $("#stop,#stop2").css('position') != 'fixed') 
        {    
           $('#stop,#stop2').css({
                'position': 'fixed',
                'top': '8px'
            });
            $('#stop2').css({
                'left':'280px'
            });
            $('#stop3').css({
                'left':'140px'
            });        }
        if (($(this).scrollTop()+200) > footer  ) 
        {
          $('#stop,#stop2').css({
              'position':'absolute',
              'top':'1800px'
            });
        }      
    });

这里还有一个更新的 fiddle :http://jsfiddle.net/xPdD7/8/

这就是您要达到的目标吗？

关于javascript - jquery 滚动限制。？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20949277/

26

4

0

文章推荐： c - 如何同时读带分数和正分数？

文章推荐： node.js - nodejs.子进程如何随着主进程一起销毁？

文章推荐： c - C 中的 fscanf csv。未分配值

文章推荐： jquery - 根据日期更改带有 JQuery 的 Div 类

c# - 限制/限制 serviceBus 队列以触发 ServiceBusTrigger 形式的消息
我有一个 ServiceBusQueue(SBQ)，它获取大量消息负载。我有一个具有 accessRights(manage) 的 ServiceBusTrigger(SBT)，它不断轮询来自 SBQ
mysql - 对特定列应用 SQL 限制，而不是对完整结果集应用 SQL 限制
在下面给出的结果集中，有 2 个唯一用户 (id)，并且查询中可能会出现更多此类用户: 这是多连接查询: select id, name, col1Code, col2Code, col2Va
python - 限制/限制 GRequests 中 HTTP 请求的速率
我正在用 Python 2.7.3 编写一个带有 GRequests 的小脚本和 lxml 可以让我从各种网站收集一些收藏卡价格并进行比较。问题是其中一个网站限制了请求的数量，如果我超过它，就会发回
database - 跟进【删除(级联/限制)】和更新(级联/限制)
我想知道何时实际使用删除级联或删除限制以及更新级联或更新限制。我对使用它们或在我的数据库中应用感到很困惑。最佳答案在外键约束上使用级联运算符是一个热门话题。理论上，如果您知道删除父对象也将自动删
SQL where 限制
下面是我的输出，我只想显示那些重复的名字。每个名字都是飞行员，数字是飞行员驾驶的飞机类型。我想显示驾驶不止一架飞机的飞行员的姓名。我正在使用 sql*plus PIL_PILOTNAME
NativeScript 限制
我正在评估不同的移动框架，我认为 nativescript 是一个不错的选择。但我不知道开发过程是否存在限制。例如，我对样式有限制(这并不重要)，但我想知道将来我是否可以有限制并且不能使用某些 nat
GrailsDataBinder 限制？
我正在尝试使用 grails 数据绑定(bind)将一些表单参数映射到我的模型中，但我认为在映射嵌入式集合方面可能存在一些限制。例如，如果我提交一些这样的参数，那么映射工作正常: //this wo
Django模板timesince过滤器-限制
是否可以将 django 自过滤器起的时间限制为 7 天。如果日期超过 7 天，则不应用过滤器最佳答案 timesince 的源代码位于 django/django/utils/timesince.
Paypal 限制
我想在我的网站上嵌入一个 PayPal 捐赠按钮。但问题是我住在伊朗——这个国家受到制裁，人们不使用国际银行账户或主要信用卡。有什么想法吗？请帮忙! 问候沮丧最佳答案您可以在伊朗境内使用为伊朗
MySQL联合+限制
这是我的查询 select PhoneNumber as _data,PhoneType as _type from contact_phonenumbers where ContactID = 3
mongodb $in 限制
这个问题在这里已经有了答案: What is the maximum number of parameters passed to $in query in MongoDB? (4 个答案) 关闭
AndroidManifest 限制
我的一个项目的 AndroidManifest.xml 变得越来越大(> 1000 行)，因为我必须对某些文件类型使用react并且涵盖所有情况变得越来越复杂。我想知道 list 大小是否有任何限制。
MySQL 限制
在使用 Sybase、Infomix、DB2 等其他数据库产品多年后使用 MySQL 5.1 Enterprise 时；我遇到了 MySQL 不会做的事情。例如，它只能为 SELECT 查询生成 EX
mongodb $in 限制
这个问题在这里已经有了答案: What is the maximum number of parameters passed to $in query in MongoDB? (4 个回答) 关闭5年
限制 Apache日志文件大小的方法
通常我们是在{$apache}/conf/httpd.conf中设置Apache的参数，然而我们并没有发现可以设置日志文件大小的配置指令，通过参考http://httpd.apache.org/do
Android SharedPreferences 限制
我正在搜索最大的 Android SharedPreferences 键值对，但找不到任何好的答案。其次，我想问一下，如果我有一个键，它的字符串值限制是多少。多少字符可以放入其中。如果我需要频繁更改值
Soundcloud API 限制。
我目前正在试验 SoundCloud API，并注意到我对/tracks 资源的 GET 请求一次从不返回超过 200 个结果。关于这个的几个问题: 这个限制是故意的吗？有没有办法增加这个限制？如
Firebase TLS 限制
我正在与一家名为 Dwolla 的金融技术公司合作，该公司提供了一个 API，用于将银行信息附加到用户并收取/发送 ACH 付款。他们需要我将我的 TLS 最低版本升级到 1.2(禁用 TLS 1.
php - 根据重复元素的数量对PHP中的多维关联数组进行排序/限制
我在 PHP 中有一个多维数组，如下所示: $array = Array ( [0] => Array ( [bill] => 1 ) [1] => Array ( [
连接的 SQL 限制
我在获取下一个查询的第一行时遇到了问题: Select mar.Title MarketTitle, ololo.NUMBER, ololo.Title from Markets mar JOIN(

首页

博学

6Ren·AI

商城

javascript - jquery 滚动限制。？