$(window).scroll函数不会触发 [英] $(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)

• 直到固定的滚动值时才开始固定".
• 在页脚之前停止固定"(以免重叠)

我一直在跟踪，但是$(window).scroll()函数永远不会为我触发..(仅在小提琴示例/测试中).. $(document)内的另一个console.log() .ready()开火..但是注意到$(window).scroll()函数内部了吗?

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父对象)

(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的使用)..注释掉..仍不触发.. ::

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

console.log()正常运行..但是没有滚动功能.

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

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

推荐答案

从评论到答案，以帮助识别罪魁祸首.

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.

这篇关于$(window).scroll函数不会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！