Question

我正在尝试将此教程技术应用到我当前的项目中： http://www.webgeekly.com/tutorials/jquery/a-simple-guide-to-making-a-div-static-as-you-scroll-past-it/

（特别是左侧的相对/修复社交媒体工具栏）

直到某个滚动值才开始“固定”。
在页脚之前停止“固定”（不重叠）

我一直在跟着，但$（窗口）.scroll（）函数永远不会为我开火..（仅在小提琴示例/测试中）.. $（文档）中的其他console.log（） .ready（）fire ..但是在$（window）.scroll（）函数里面注意到了吗？

//sticky map placement
        $(function(){           
            var msie6 = $.browser == 'msie' && $.browser.version < 7;
            if (!msie6) {
                console.log("NOT IE 6");
                console.log($(window).scrollTop());
                var top = $('#mapContainer').offset().top;
                console.log("TOP: "+top);
                var bottom = $('#directory').height() + $('#directory').offset().top;;
                console.log("BOTTOM: "+bottom);
                //var top = 458;                
                $(window).scroll(function (event) {
                    console.log("scrolling.......");
                    var y = $(this).scrollTop();
                    if (y >= top) { 
                        $('#mapContainer').addClass('fixed');
                        console.log("class added");
                    }else { 
                        $('#mapContainer').removeClass('fixed');
                        console.log("class removed");
                    }
                });         
            }
        });

相关风格:(为了让事情有效而多次改变）

（mapContainer parent）

#col-2 {            
            float:right;        
            width:935px!important;
            padding:0;
            margin:0;   
            position: relative; 
            height:auto;
        }


#mapContainer{
            display:table; 
            width:240px;            
            /* sticky map (fixed position after certain amount of scroll) */

            /*float:right;*/

            position: absolute;         
            top: 140px;
            left: 685px;
            margin-left: 10px;                      
        }   

        .fixed{
            position: fixed;
        }

Mottie建议代码更新（删除使用.browser）..评论出来..仍然没有解雇.. :(

//sticky map placement
        $(function(){           
            //var msie6 = $.browser == 'msie' && $.browser.version < 7;
            //if (!msie6) {
                console.log("NOT IE 6");
                console.log($(window).scrollTop());
                var top = $('#mapContainer').offset().top;
                console.log("TOP: "+top);
                var bottom = $('#directory').height() + $('#directory').offset().top;;
                console.log("BOTTOM: "+bottom);
                //var top = 458;                
                $(window).scroll(function (event) {
                    console.log("scrolling.......");
                    var y = $(this).scrollTop();
                    if (y >= top) { 
                        $('#mapContainer').addClass('fixed');
                        console.log("class added");
                    }else { 
                        $('#mapContainer').removeClass('fixed');
                        console.log("class removed");
                    }
                });         
            //}
        });

console.log（）的启动很好..但没有滚动功能..

对于@Daved -

这是我的最新/当前功能：但是当你向后滚动它时，它会再次跳出原位：

//sticky map placement
        $(function(){           
            //var msie6 = $.browser == 'msie' && $.browser.version < 7;
            //if (!msie6) {
                console.log("NOT IE 6");
                console.log($(window).scrollTop());
                var top = $('#mapContainer').offset().top;
                console.log("TOP: "+top);
                var bottom = $('#directory').height() + $('#directory').offset().top;;
                console.log("BOTTOM: "+bottom);
                var $mc = $('#mapContainer');

                var containerWidth = $('#col-2').position().left + $('#col-2').width();
                var placementPoint = containerWidth - $('#mapContainer').width();
                //var top = 458;                
                $(window).scroll(function (event) {
                    console.log("scrolling.......");
                    var y = $(this).scrollTop();
                    if (y >= top) {                     
                        $('#mapContainer').offset({left:placementPoint});                                           
                        $('#mapContainer').addClass('fixed');
                        console.log("class added");
                    }else {                         
                        $('#mapContainer').removeClass('fixed');
                        //$('#mapContainer').offset({top:140, left:685});   
                        console.log("class removed");
                    }
                });         
            //}
        });

Answer 1

从评论到答案，帮助确定罪魁祸首。

滚动条位于正文上，而不是在窗口上。基本上，溢出导致滚动条出现，但它位于不在窗口上的元素上。

$（窗口）.scroll函数不会触发

1 个答案: