$(window).scroll 函数不触发

Question

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

（特别是左侧的 relative/fix 社交媒体工具栏）

直到某个滚动值才开始 'fixed'。
停止在页脚之前 'fixed'（以免重叠）

我一直在关注，但是 $(window).scroll() 函数从来没有为我触发过..（仅在 fiddle example/test 中）.. other console.log() inside the $(document).ready() fire..but noting inside the $(window).scroll() function?

//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");
                    }
                });         
            }
        });

相关样式：（为了让事情正常进行多次更改）

（地图容器父级）

#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 -

这是我的 latest/current 功能：但是当您向上滚动时，它再次跳出位置：

//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

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

滚动条在主体上，而不是 window。基本上，溢出导致滚动条出现，但它位于不在 window.

上的元素上

$(window).scroll 函数不触发

$(window).scroll function doesnt fire

jquery

scroll

positioning

window