我的固定菜单Nav Header不会保留在它包含的div中。它是一个响应性问题吗？ [英] My Fixed Menu Nav Header won't stay in the div it is contained in. Is it a responsive issue?

问题描述

好吧，我无法弄清楚我的生活。我花了几天时间。

我有一个jquery代码片段，它将相对位置的导航栏打开，并在屏幕顶​​部将其切换到固定位置。我有另一个网站，但在这个网站上，当我有不同的屏幕尺寸的导航栏向左或向右滑动工作正常。采用更大或更小的屏幕尺寸。

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

我怎样才能让导航头保持放在容器div的网站内容？

这里是一个jsfiddle，但我不知道如何让小提琴使用我的jquery。

jsfiddle of code

以下是jquery的代码...我不知道jQuery是否是问题。

  // JavaScript文档
 / * jQuery（document）.ready（function（）{
 if （jQuery（'header，div，p，span，h1，h2，h3，h4，a'）。hasClass（'isa-scroll-fixed'））{
 var el = jQuery（'。isa-scroll （）; 
 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文档
 / * 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- （'.sub-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）; 
函数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）; 
}; 
函数scrollFixed（el，elTop，elLeft）{
 jQuery（document）.unbind（'scroll'）。scroll（function（）{
 // alert（elTop）; 
）var height = jQuery（window）.height（）; 
 var scrollTop = jQuery（window）.scrollTop（）; $ b $ if（scrollTop> = elTop）{
 // add fixed 
 jQuery（el）.addClass（'scroll_fixed'）。css（left，elLeft +px）; 
} else {
 // clear fixed 
 jQuery（el） （'style'，''）; 
} 
}）
} 
  

解决方案

header.navbar是固定值。
$ b 您必须使用@媒体更改其不同屏幕尺寸的价值。

Ok I can't figure this out for the life of me. I have spent a couple days on it.

I have a jquery snippet that takes a nav bar in a relative position and upon hitting the top of the screen switches it to a fixed position. I have this working fine on another site but on this site when I have varying screen sizes the nav bar slides to the left or right. Happens with larger or smaller screen sizes then mine.

Here is the site. http://curtisj.trafficflo.net/

How can I get the navigation header to stay put in the container div for the content of the site?

here is a jsfiddle but I don't know how to get fiddle to use my jquery.

jsfiddle of code

Here is the code of the jquery... I don't know if jquery is the issue though.

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

解决方案

header.navbar is fixed value.

You have to use @media to change its value for different screen sizes.

这篇关于我的固定菜单Nav Header不会保留在它包含的div中。它是一个响应性问题吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！