$(window).scroll function doesnt fire

问题

I am trying to implement this tutorial technique into my current project: http://www.webgeekly.com/tutorials/jquery/a-simple-guide-to-making-a-div-static-as-you-scroll-past-it/

(specifically the relative/fix social media tool bar on the left side)

• doesnt start to be 'fixed' until a certain scroll value.
• stops being 'fixed' before the footer (as to not overlap it)

I have been following along, but the $(window).scroll() function never fires for me.. (only in a fiddle example/test).. the 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");
                    }
                });         
            }
        });

Relevant styles: (been changed many times in an attempt to get things working)

(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 suggest code updates (remove the use of .browser).. commented it out.. still not firing.. :(

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

The console.log()'s fire just fine.. but no scrolling functions..

For @Daved -

Here is my latest/current function: but when you scroll back UP it jumps out of place again:

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

回答1:

From comment to answer to help identify what the culprit was.

The scrollbar is on the body, not on the window. Basically, an overflow is causing the scrollbar to appear but it's on an element not on the window.

来源：https://stackoverflow.com/questions/29016656/window-scroll-function-doesnt-fire