jquery - 我的固定菜单导航标题不会留在它所在的 div 中。这是一个响应问题吗？

Question

好吧，我这辈子都想不通。我已经花了几天时间。

我有一个 jquery 片段，它在一个相对位置放置一个导航栏，并在点击屏幕顶部时将其切换到一个固定位置。我在另一个网站上工作正常，但在这个网站上，当我有不同的屏幕尺寸时，导航栏会向左或向右滑动。发生在比我更大或更小的屏幕尺寸上。

这是网站。 http://curtisj.trafficflo.net/

如何让导航标题留在网站内容的容器 div 中？

这是一个 jsfiddle，但我不知道如何让 fiddle 使用我的 jquery。

jsfiddle of code

这是 jquery 的代码...不过我不知道 jquery 是否是问题所在。

// JavaScript Document
/*     jQuery(document).ready(function(){
        if(jQuery('header,div,p,span,h1,h2,h3,h4,a').hasClass('isa-scroll-fixed')){
            var el = jQuery('.isa-scroll-fixed'),
            elTop = jQuery(el).offset().top;
            elLeft = jQuery(el).offset().left;
            //alert(elTop); 
            jQuery(document).scroll(function(){
                var height = jQuery(window).height();
                var scrollTop = jQuery(window).scrollTop();
                if(scrollTop>=elTop){
                    //add fixed
                    jQuery(el).addClass('scroll_fixed').css("left",elLeft+"px");
                }else{
                    //clear fixed
                    jQuery(el).removeClass('scroll_fixed').attr('style','');
                }
            })
        }
    })
       */
       // JavaScript Document
    /* jQuery(window).load(function(){
        if(jQuery('header,div,p,span,h1,h2,h3,h4,a').hasClass('isa-scroll-fixed')){
            var el = jQuery('.isa-scroll-fixed'),
            elTop = jQuery(el).offset().top;
            elLeft = jQuery(el).offset().left;
            //alert(elTop); 
            var scrollTop = jQuery(window).scrollTop();
            scrollFixed(el,elTop,elLeft);
        }
    }) */
    var setInter = null;
    var session = null;

    setInter = setInterval(function(){
        if(jQuery('header,div,p,span,h1,h2,h3,h4,a').hasClass('isa-scroll-fixed')){
            var el = jQuery('.isa-scroll-fixed');
            session =  jQuery(el).attr('set-scroll');
            //alert(session);

            if(session == '2'){
                jQuery(el).attr('set-scroll','2');
            }else{
                jQuery(el).attr('set-scroll','1');
            }
            if(session == '1'){
                setValue(el);
            }
        }
    }, 200);
    function setValue(el){
        var setScroll = jQuery(el).attr('set-scroll');
        elTop = jQuery(el).offset().top;
        elLeft = jQuery(el).offset().left;
        //alert(elTop);
        jQuery(el).attr('set-scroll','2');
        scrollFixed(el,elTop,elLeft);
    };
    function scrollFixed(el,elTop,elLeft){
        jQuery(document).unbind('scroll').scroll(function(){
            //alert(elTop);
            var height = jQuery(window).height();
            var scrollTop = jQuery(window).scrollTop();
            if(scrollTop>=elTop){
                //add fixed
                jQuery(el).addClass('scroll_fixed').css("left",elLeft+"px");
            }else{
                //clear fixed
                jQuery(el).removeClass('scroll_fixed').attr('style','');
            }
        })
    }

Answer 1

将所有内容包装在容器中。

另外，在你的 div outside contentSection_interactive 上使用绝对定位

我希望我可以重现，但是你有很多插件正在进行并且你还没有生成 code 或 fiddle。

在这里为您提供帮助。

通用满刻度 DIV

• 宽度:100%;
• 亮度:100%；
• position:absolute；