$(window).scroll 函数不会触发

Question

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

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

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

我一直在关注，但是 $(window).scroll() 函数永远不会为我触发..（仅在小提琴示例/测试中）.. $(document) 中的另一个 console.log() .ready() 触发..但注意到 $(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 父级）

#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

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

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