كود تثبيت الناف أعلى المتصفح

صفحة 1 من اصل 2 1, 2  الصفحة التالية

اذهب الى الأسفل

كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف keko_ferkeko في الثلاثاء 5 يوليو 2016 - 21:07

بسم الله الرحمن الرحيم
السلام عليكم و رحمة الله و بركاته


أبحث عن كود تثبيت عارضة المنتدى (ناف بار) في أعلى المتصفحة عند التحرك لأسفل الصفحة.
نسخة المنتدى PHPBB3



خالص التحية؛
avatar
keko_ferkeko
 
 

ذكر
عدد المساهمات : 562
معدل النشاط : 4052
السُمعة : 0

http://nf-son.forumotion.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف Michael_vx في الأربعاء 6 يوليو 2016 - 1:31

اولا
اختر احد كودين الورقة واضفة الى ورقة التصميم CSS
اختر واحد فقط
الاول وهو اللون الفاتح
الكود:
/* مايكل سوفت sticky nav main */
#fa_sticky_nav {
  font-size:0; /* hide whitespace */
  text-align:center;
  background:#FAFAFA;
  border-bottom:1px solid #CCC !important;
  height:30px;
  position:fixed;
  right:0;
  z-index:999;
  overflow:hidden;
  transition:top 200ms linear, width 600ms ease-in-out;
}

#fa_sticky_nav li { display:inline } /* navlist adjustment */


/* sticky menu links */
#fa_sticky_nav a.mainmenu {
  color:#39C;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  background:url('http://i18.servimg.com/u/f18/18/45/41/65/nav10.png') repeat-x 0px 30px;
  display:inline-block;
  padding:0 10px;
  height:30px;
  line-height:30px;
  transition:200ms;
}

#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
  background-position:0 25px;
}


/* sticky nav toggler */
#fa_sticky_toggle {
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnibo10.png') no-repeat 0 0 #FAFAFA;
  border:1px solid #CCC;
  border-right:none;
  display:inline-block;
  height:29px;
  width:30px;
  position:fixed;
  right:0;
  z-index:999;
  transition:top 200ms linear;
}

#fa_sticky_toggle:hover { background-position:-30px 0 }


/* make hidden toolbar similar to toggler */
#fa_toolbar_hidden {
  border-radius:0 !important;
  border:1px solid #CCC;
  border-right:0;
  border-top:0;
}


/* post offset fix */
.post div[style*="-30px;"] {
  top:-60px !important;
}

الثانى غامق اللون


الكود:
/* مايكل سوفت sticky nav main */
#fa_sticky_nav {
  font-size:0; /* hide whitespace */
  text-align:center;
  background:#333;
  border-bottom:1px solid #222 !important;
  height:30px;
  position:fixed;
  right:0;
  z-index:999;
  overflow:hidden;
  transition:top 200ms linear, width 600ms ease-in-out;
}

#fa_sticky_nav li { display:inline } /* navlist adjustment */


/* sticky menu links */
#fa_sticky_nav a.mainmenu {
  color:#CCC;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/row10.gif') repeat-x 0px 30px;
  display:inline-block;
  padding:0 10px;
  height:30px;
  line-height:30px;
  transition:200ms;
}

#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
  color:#FFF;
  background-position:0 25px;
}


/* sticky nav toggler */
#fa_sticky_toggle {
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnida11.png') no-repeat 0 0 #333;
  border:1px solid #222;
  border-right:none;
  display:inline-block;
  height:29px;
  width:30px;
  position:fixed;
  right:0;
  z-index:999;
  transition:top 200ms linear;
}

#fa_sticky_toggle:hover { background-position:-30px 0 }


/* make hidden toolbar similar to toggler */
#fa_toolbar_hidden {
  border-radius:0 !important;
  border:1px solid #222;
  border-right:0;
  border-top:0;
}


/* post offset fix */
.post div[style*="-30px;"] {
  top:-60px !important;
}
ثم اضف الكود التالى فى الجافا سكربت هذا الكود مخصص للنسخة الثالثة

الكود:

(function() {

  if (!window.FA) window.FA = {};
  if (FA.Nav) {
    if (window.console && console.warn) console.warn('FA.Nav has already been defined');
    return;
  }

  FA.Nav = {
  
    // TARGET NODES BY VERSION
    // PHPBB2  : .bodyline > table + table
    // PHPBB3  : #page-header .navlinks
    // PUNBB    : #pun-navlinks
    // INVISION : #submenu
    targetNode : '#page-header .navlinks',
  
    customNav : '', // custom navlinks
  
    keepDefault : true, // keep the default navlinks
    collapsible : true, // show hide button
  
  
    // offset states
    offsets : {
      tbVisible : {
        bottom : 30,
        top : '30px'
      },
    
      tbHidden : {
        bottom : 0,
        top : '0px'
      },
    
      toggler : '30px'
    },
  
    activeOffset : {}, // active offset for the sticky nav
  
    visible : false, // sticky nav is visible
  
    // check the state of the static nav
    checkState : function() {
      if (!FA.Nav.animating) {
        var hidden = FA.Nav.barStatic.getBoundingClientRect().bottom <= FA.Nav.activeOffset.bottom;
    
        if (hidden && FA.Nav.barSticky.style.top != FA.Nav.activeOffset.top) {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = FA.Nav.offsets.toggler;
          FA.Nav.barSticky.style.top = FA.Nav.activeOffset.top;
          FA.Nav.visible = true;
        } else if (!hidden && FA.Nav.barSticky.style.top != '-30px') {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = '-30px';
          FA.Nav.barSticky.style.top = '-30px';
          FA.Nav.visible = false;
        }
      }
    },
  
    animating : false, // sticky nav is animating
  
    // animate the sticky nav when the toolbar is toggled
    animate : function() {
      if (FA.Nav.visible) {
        FA.Nav.animating = true;
        FA.Nav.barSticky.style.transition = 'none';
    
        $(FA.Nav.barSticky).animate({
          top : FA.Nav.activeOffset.top
        }, function() {
          FA.Nav.barSticky.style.transition = '';
          FA.Nav.animating = false;
          FA.Nav.checkState();
        });
      }
    },
  
    // toggle sticky navigation and remember preference via cookies
    toggle : function() {
      if (FA.Nav.barSticky.style.width == '100%') {
        my_setcookie('fa_sticky_nav', 'hidden');
        FA.Nav.barSticky.style.width = '0%';
      } else {
        my_setcookie('fa_sticky_nav', 'shown');
        FA.Nav.barSticky.style.width = '100%';
      }
      return false;
    }
  
  };
 
  $(function() {
    // set default offsets based on toolbar state
    FA.Nav.activeOffset = (my_getcookie('toolbar_state') == 'fa_hide' || !_userdata.activate_toolbar) ? FA.Nav.offsets.tbHidden : FA.Nav.offsets.tbVisible;
    if (!_userdata.activate_toolbar) FA.Nav.offsets.toggler = '0px';
  
    // find the static nav
    FA.Nav.barStatic = document.querySelector ? document.querySelector(FA.Nav.targetNode) : $(FA.Nav.targetNode)[0]; // static nav
  
    if (FA.Nav.barStatic) {
      FA.Nav.barSticky = FA.Nav.barStatic.cloneNode(FA.Nav.keepDefault); // clone static nav
      if (FA.Nav.customNav) FA.Nav.barSticky.insertAdjacentHTML('beforeEnd', FA.Nav.customNav);
      FA.Nav.barSticky.id = 'fa_sticky_nav';
      FA.Nav.barSticky.style.width = my_getcookie('fa_sticky_nav') == 'hidden' ? '0%' : '100%';
      FA.Nav.barSticky.style.top = '-30px';
        
      document.body.appendChild(FA.Nav.barSticky); // append the sticky one
        
      // sticky nav toggler
      if (FA.Nav.collapsible) {
        FA.Nav.toggler = document.createElement('A');
        FA.Nav.toggler.id = 'fa_sticky_toggle';
        FA.Nav.toggler.href = '#';
        FA.Nav.toggler.style.top = '-30px';
        FA.Nav.toggler.onclick = FA.Nav.toggle;
        
        document.body.appendChild(FA.Nav.toggler);
      };
      
      window.onscroll = FA.Nav.checkState; // check state on scroll
      FA.Nav.checkState(); // startup check
    
      // toolbar modifications
      $(function() {
        // animate sticky nav and change offsets when the toolbar is toggled
        $('#fa_hide').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbHidden;
          FA.Nav.animate();
        });
      
        $('#fa_show').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbVisible;
          FA.Nav.animate();
        });
      });
    }
  });
}());
مع تحياتى
مايكل سوفت

Michael_vx
 
 

ذكر
عدد المساهمات : 1566
معدل النشاط : 5655
السُمعة : 69

http://miccsoft.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف keko_ferkeko في الأربعاء 6 يوليو 2016 - 5:11

شكراً مايكل على المساعدة   Cool
للأسف الكود لم يعمل! لا أعرف بالظبط ما المشكلة.. لكني جربت كل الأكواد المكتوبة و لم تفلح Sad
avatar
keko_ferkeko
 
 

ذكر
عدد المساهمات : 562
معدل النشاط : 4052
السُمعة : 0

http://nf-son.forumotion.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف assemDz في الأربعاء 6 يوليو 2016 - 6:10

اهلا اخي تفضل جرب هذا الكود CSS :

الكود:

.fa_fix {
    position: fixed !important;
    top: 0;
    right: 0;
}
avatar
assemDz
 
 

ذكر
عدد المساهمات : 224
معدل النشاط : 3418
السُمعة : 15

http://focus-dev.ahlamountada.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف keko_ferkeko في الأربعاء 6 يوليو 2016 - 7:05

شكراً عاصم 
لكن الكود لا يعمل Sad
avatar
keko_ferkeko
 
 

ذكر
عدد المساهمات : 562
معدل النشاط : 4052
السُمعة : 0

http://nf-son.forumotion.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف JoryAbdallah في الأربعاء 6 يوليو 2016 - 8:05

وعليكم السلام ورحمة الله وبركاته
بدون كود يمكنك ثبيتها من خلال
 لوحة الإدارة >> عناصر إضافية >> عارضة المنتدى >> تشكيل >> تفعيل عارضة المنتدى مع إمكانية جعلها ثابتة في أعلى المتصفح بشكل

صورة للامر
دمت بخير
avatar
JoryAbdallah
 
 

انثى
عدد المساهمات : 4210
معدل النشاط : 6051
السُمعة : 292

http://taqnyiat.ahlamontada.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف keko_ferkeko في الأربعاء 6 يوليو 2016 - 8:21

شكراً جرح على المساعدة..
أنا كنت أقصد الناف بار و ليس عارضة المنتدى، يعني أقصد شريط (المنتدى - البوابة - التسجيل - الدخول..)

عيدك سعيد
avatar
keko_ferkeko
 
 

ذكر
عدد المساهمات : 562
معدل النشاط : 4052
السُمعة : 0

http://nf-son.forumotion.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف JoryAbdallah في الأربعاء 6 يوليو 2016 - 9:21

اهاا عذرا اخي لم انتبه
تفضل هنا
0marp0p23 كتب:اضف كود الجافا التالي في جميع الصفح
الكود:
(function() {
  if (!window.FA) window.FA = {};
  if (FA.Nav) {
    if (window.console && console.warn) console.warn('FA.Nav has already been defined');
    return;
  }
 
  FA.Nav = {
  
    // TARGET NODES BY VERSION
    // PHPBB2  : .bodyline > table + table
    // PHPBB3  : #page-header .navlinks
    // PUNBB    : #pun-navlinks
    // INVISION : #submenu
    targetNode : '.bodyline > table + table',
  
    customNav : '', // custom navlinks
  
    keepDefault : true, // keep the default navlinks
    collapsible : true, // show hide button
  
  
    // offset states
    offsets : {
      tbVisible : {
        bottom : 30,
        top : '30px'
      },
    
      tbHidden : {
        bottom : 0,
        top : '0px'
      },
    
      toggler : '30px'
    },
  
    activeOffset : {}, // active offset for the sticky nav
  
    visible : false, // sticky nav is visible
  
    // check the state of the static nav
    checkState : function() {
      if (!FA.Nav.animating) {
        var hidden = FA.Nav.barStatic.getBoundingClientRect().bottom <= FA.Nav.activeOffset.bottom;
    
        if (hidden && FA.Nav.barSticky.style.top != FA.Nav.activeOffset.top) {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = FA.Nav.offsets.toggler;
          FA.Nav.barSticky.style.top = FA.Nav.activeOffset.top;
          FA.Nav.visible = true;
        } else if (!hidden && FA.Nav.barSticky.style.top != '-30px') {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = '-30px';
          FA.Nav.barSticky.style.top = '-30px';
          FA.Nav.visible = false;
        }
      }
    },
  
    animating : false, // sticky nav is animating
  
    // animate the sticky nav when the toolbar is toggled
    animate : function() {
      if (FA.Nav.visible) {
        FA.Nav.animating = true;
        FA.Nav.barSticky.style.transition = 'none';
    
        $(FA.Nav.barSticky).animate({
          top : FA.Nav.activeOffset.top
        }, function() {
          FA.Nav.barSticky.style.transition = '';
          FA.Nav.animating = false;
          FA.Nav.checkState();
        });
      }
    },
  
    // toggle sticky navigation and remember preference via cookies
    toggle : function() {
      if (FA.Nav.barSticky.style.width == '100%') {
        my_setcookie('fa_sticky_nav', 'hidden');
        FA.Nav.barSticky.style.width = '0%';
      } else {
        my_setcookie('fa_sticky_nav', 'shown');
        FA.Nav.barSticky.style.width = '100%';
      }
      return false;
    }
  
  };
 
  $(function() {
    // set default offsets based on toolbar state
    FA.Nav.activeOffset = (my_getcookie('toolbar_state') == 'fa_hide' || !_userdata.activate_toolbar) ? FA.Nav.offsets.tbHidden : FA.Nav.offsets.tbVisible;
    if (!_userdata.activate_toolbar) FA.Nav.offsets.toggler = '0px';
  
    // find the static nav
    FA.Nav.barStatic = document.querySelector ? document.querySelector(FA.Nav.targetNode) : $(FA.Nav.targetNode)[0]; // static nav
  
    if (FA.Nav.barStatic) {
      FA.Nav.barSticky = FA.Nav.barStatic.cloneNode(FA.Nav.keepDefault); // clone static nav
      if (FA.Nav.customNav) FA.Nav.barSticky.insertAdjacentHTML('beforeEnd', FA.Nav.customNav);
      FA.Nav.barSticky.id = 'fa_sticky_nav';
      FA.Nav.barSticky.style.width = my_getcookie('fa_sticky_nav') == 'hidden' ? '0%' : '100%';
      FA.Nav.barSticky.style.top = '-30px';
        
      document.body.appendChild(FA.Nav.barSticky); // append the sticky one
        
      // sticky nav toggler
      if (FA.Nav.collapsible) {
        FA.Nav.toggler = document.createElement('A');
        FA.Nav.toggler.id = 'fa_sticky_toggle';
        FA.Nav.toggler.href = '#';
        FA.Nav.toggler.style.top = '-30px';
        FA.Nav.toggler.onclick = FA.Nav.toggle;
        
        document.body.appendChild(FA.Nav.toggler);
      };
      
      window.onscroll = FA.Nav.checkState; // check state on scroll
      FA.Nav.checkState(); // startup check
    
      // toolbar modifications
      $(function() {
        // animate sticky nav and change offsets when the toolbar is toggled
        $('#fa_hide').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbHidden;
          FA.Nav.animate();
        });
      
        $('#fa_show').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbVisible;
          FA.Nav.animate();
        });
      });
    }
  });
}());

اضف كود ال CSS التالي في ورقة ال CSS
للون الابيض اضف هذا الكود (للمعاينه)
الكود:
/* sticky nav main */
#fa_sticky_nav {
  font-size:0; /* hide whitespace */
  text-align:center;
  background:#FAFAFA;
  border-bottom:1px solid #CCC !important;
  height:30px;
  position:fixed;
  right:0;
  z-index:999;
  overflow:hidden;
  transition:top 200ms linear, width 600ms ease-in-out;
}
 
#fa_sticky_nav li { display:inline } /* navlist adjustment */
 
 
/* sticky menu links */
#fa_sticky_nav a.mainmenu {
  color:#39C;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  background:url('http://i18.servimg.com/u/f18/18/45/41/65/nav10.png') repeat-x 0px 30px;
  display:inline-block;
  padding:0 10px;
  height:30px;
  line-height:30px;
  transition:200ms;
}
 
#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
  background-position:0 25px;
}
 
 
/* sticky nav toggler */
#fa_sticky_toggle {
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnibo10.png') no-repeat 0 0 #FAFAFA;
  border:1px solid #CCC;
  border-right:none;
  display:inline-block;
  height:29px;
  width:30px;
  position:fixed;
  right:0;
  z-index:999;
  transition:top 200ms linear;
}
 
#fa_sticky_toggle:hover { background-position:-30px 0 }
 
 
/* make hidden toolbar similar to toggler */
#fa_toolbar_hidden {
  border-radius:0 !important;
  border:1px solid #CCC;
  border-right:0;
  border-top:0;
}
 
 
/* post offset fix */
.post div[style*="-30px;"] {
  top:-60px !important;
}

للون الاسود أضف هذا الكود (للمعاينة)
الكود:
/* sticky nav main */
#fa_sticky_nav {
  font-size:0; /* hide whitespace */
  text-align:center;
  background:#333;
  border-bottom:1px solid #222 !important;
  height:30px;
  position:fixed;
  right:0;
  z-index:999;
  overflow:hidden;
  transition:top 200ms linear, width 600ms ease-in-out;
}
 
#fa_sticky_nav li { display:inline } /* navlist adjustment */
 
 
/* sticky menu links */
#fa_sticky_nav a.mainmenu {
  color:#CCC;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/row10.gif') repeat-x 0px 30px;
  display:inline-block;
  padding:0 10px;
  height:30px;
  line-height:30px;
  transition:200ms;
}
 
#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
  color:#FFF;
  background-position:0 25px;
}
 
 
/* sticky nav toggler */
#fa_sticky_toggle {
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnida11.png') no-repeat 0 0 #333;
  border:1px solid #222;
  border-right:none;
  display:inline-block;
  height:29px;
  width:30px;
  position:fixed;
  right:0;
  z-index:999;
  transition:top 200ms linear;
}
 
#fa_sticky_toggle:hover { background-position:-30px 0 }
 
 
/* make hidden toolbar similar to toggler */
#fa_toolbar_hidden {
  border-radius:0 !important;
  border:1px solid #222;
  border-right:0;
  border-top:0;
}
 
 
/* post offset fix */
.post div[style*="-30px;"] {
  top:-60px !important;
}

tongue
avatar
JoryAbdallah
 
 

انثى
عدد المساهمات : 4210
معدل النشاط : 6051
السُمعة : 292

http://taqnyiat.ahlamontada.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف assemDz في الأربعاء 6 يوليو 2016 - 9:49

اهلا أخي :
عيدكم مبارك
تفضل هاهو الكود :

ضع هذا في الجافا سكريبت :

الكود:

$("document").ready(function($){
    var nav = $('a.mainmenu');

    $(window).scroll(function () {
        if ($(this).scrollTop() > 125) {
            nav.addClass("assemDz");
        } else {
            nav.removeClass("assemDz");
        }
    });
});

ثم توجه الى ورقة css :

الكود:

.assemDz{ 
    z-index: 999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}

تحياتي
avatar
assemDz
 
 

ذكر
عدد المساهمات : 224
معدل النشاط : 3418
السُمعة : 15

http://focus-dev.ahlamountada.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف MSCFC في الأربعاء 6 يوليو 2016 - 11:41

كود جميل
avatar
MSCFC
 
 

ذكر
عدد المساهمات : 102
معدل النشاط : 936
السُمعة : 4

http://mscfc.arabstar.biz

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف keko_ferkeko في الأربعاء 6 يوليو 2016 - 12:45

JAR7 كتب:اهاا عذرا اخي لم انتبه
تفضل هنا
0marp0p23 كتب:اضف كود الجافا التالي في جميع الصفح
الكود:
(function() {
  if (!window.FA) window.FA = {};
  if (FA.Nav) {
    if (window.console && console.warn) console.warn('FA.Nav has already been defined');
    return;
  }
 
  FA.Nav = {
  
    // TARGET NODES BY VERSION
    // PHPBB2  : .bodyline > table + table
    // PHPBB3  : #page-header .navlinks
    // PUNBB    : #pun-navlinks
    // INVISION : #submenu
    targetNode : '.bodyline > table + table',
  
    customNav : '', // custom navlinks
  
    keepDefault : true, // keep the default navlinks
    collapsible : true, // show hide button
  
  
    // offset states
    offsets : {
      tbVisible : {
        bottom : 30,
        top : '30px'
      },
    
      tbHidden : {
        bottom : 0,
        top : '0px'
      },
    
      toggler : '30px'
    },
  
    activeOffset : {}, // active offset for the sticky nav
  
    visible : false, // sticky nav is visible
  
    // check the state of the static nav
    checkState : function() {
      if (!FA.Nav.animating) {
        var hidden = FA.Nav.barStatic.getBoundingClientRect().bottom <= FA.Nav.activeOffset.bottom;
    
        if (hidden && FA.Nav.barSticky.style.top != FA.Nav.activeOffset.top) {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = FA.Nav.offsets.toggler;
          FA.Nav.barSticky.style.top = FA.Nav.activeOffset.top;
          FA.Nav.visible = true;
        } else if (!hidden && FA.Nav.barSticky.style.top != '-30px') {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = '-30px';
          FA.Nav.barSticky.style.top = '-30px';
          FA.Nav.visible = false;
        }
      }
    },
  
    animating : false, // sticky nav is animating
  
    // animate the sticky nav when the toolbar is toggled
    animate : function() {
      if (FA.Nav.visible) {
        FA.Nav.animating = true;
        FA.Nav.barSticky.style.transition = 'none';
    
        $(FA.Nav.barSticky).animate({
          top : FA.Nav.activeOffset.top
        }, function() {
          FA.Nav.barSticky.style.transition = '';
          FA.Nav.animating = false;
          FA.Nav.checkState();
        });
      }
    },
  
    // toggle sticky navigation and remember preference via cookies
    toggle : function() {
      if (FA.Nav.barSticky.style.width == '100%') {
        my_setcookie('fa_sticky_nav', 'hidden');
        FA.Nav.barSticky.style.width = '0%';
      } else {
        my_setcookie('fa_sticky_nav', 'shown');
        FA.Nav.barSticky.style.width = '100%';
      }
      return false;
    }
  
  };
 
  $(function() {
    // set default offsets based on toolbar state
    FA.Nav.activeOffset = (my_getcookie('toolbar_state') == 'fa_hide' || !_userdata.activate_toolbar) ? FA.Nav.offsets.tbHidden : FA.Nav.offsets.tbVisible;
    if (!_userdata.activate_toolbar) FA.Nav.offsets.toggler = '0px';
  
    // find the static nav
    FA.Nav.barStatic = document.querySelector ? document.querySelector(FA.Nav.targetNode) : $(FA.Nav.targetNode)[0]; // static nav
  
    if (FA.Nav.barStatic) {
      FA.Nav.barSticky = FA.Nav.barStatic.cloneNode(FA.Nav.keepDefault); // clone static nav
      if (FA.Nav.customNav) FA.Nav.barSticky.insertAdjacentHTML('beforeEnd', FA.Nav.customNav);
      FA.Nav.barSticky.id = 'fa_sticky_nav';
      FA.Nav.barSticky.style.width = my_getcookie('fa_sticky_nav') == 'hidden' ? '0%' : '100%';
      FA.Nav.barSticky.style.top = '-30px';
        
      document.body.appendChild(FA.Nav.barSticky); // append the sticky one
        
      // sticky nav toggler
      if (FA.Nav.collapsible) {
        FA.Nav.toggler = document.createElement('A');
        FA.Nav.toggler.id = 'fa_sticky_toggle';
        FA.Nav.toggler.href = '#';
        FA.Nav.toggler.style.top = '-30px';
        FA.Nav.toggler.onclick = FA.Nav.toggle;
        
        document.body.appendChild(FA.Nav.toggler);
      };
      
      window.onscroll = FA.Nav.checkState; // check state on scroll
      FA.Nav.checkState(); // startup check
    
      // toolbar modifications
      $(function() {
        // animate sticky nav and change offsets when the toolbar is toggled
        $('#fa_hide').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbHidden;
          FA.Nav.animate();
        });
      
        $('#fa_show').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbVisible;
          FA.Nav.animate();
        });
      });
    }
  });
}());

اضف كود ال CSS التالي في ورقة ال CSS
للون الابيض اضف هذا الكود (للمعاينه)
الكود:
/* sticky nav main */
#fa_sticky_nav {
  font-size:0; /* hide whitespace */
  text-align:center;
  background:#FAFAFA;
  border-bottom:1px solid #CCC !important;
  height:30px;
  position:fixed;
  right:0;
  z-index:999;
  overflow:hidden;
  transition:top 200ms linear, width 600ms ease-in-out;
}
 
#fa_sticky_nav li { display:inline } /* navlist adjustment */
 
 
/* sticky menu links */
#fa_sticky_nav a.mainmenu {
  color:#39C;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  background:url('http://i18.servimg.com/u/f18/18/45/41/65/nav10.png') repeat-x 0px 30px;
  display:inline-block;
  padding:0 10px;
  height:30px;
  line-height:30px;
  transition:200ms;
}
 
#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
  background-position:0 25px;
}
 
 
/* sticky nav toggler */
#fa_sticky_toggle {
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnibo10.png') no-repeat 0 0 #FAFAFA;
  border:1px solid #CCC;
  border-right:none;
  display:inline-block;
  height:29px;
  width:30px;
  position:fixed;
  right:0;
  z-index:999;
  transition:top 200ms linear;
}
 
#fa_sticky_toggle:hover { background-position:-30px 0 }
 
 
/* make hidden toolbar similar to toggler */
#fa_toolbar_hidden {
  border-radius:0 !important;
  border:1px solid #CCC;
  border-right:0;
  border-top:0;
}
 
 
/* post offset fix */
.post div[style*="-30px;"] {
  top:-60px !important;
}

للون الاسود أضف هذا الكود (للمعاينة)
الكود:
/* sticky nav main */
#fa_sticky_nav {
  font-size:0; /* hide whitespace */
  text-align:center;
  background:#333;
  border-bottom:1px solid #222 !important;
  height:30px;
  position:fixed;
  right:0;
  z-index:999;
  overflow:hidden;
  transition:top 200ms linear, width 600ms ease-in-out;
}
 
#fa_sticky_nav li { display:inline } /* navlist adjustment */
 
 
/* sticky menu links */
#fa_sticky_nav a.mainmenu {
  color:#CCC;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/row10.gif') repeat-x 0px 30px;
  display:inline-block;
  padding:0 10px;
  height:30px;
  line-height:30px;
  transition:200ms;
}
 
#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
  color:#FFF;
  background-position:0 25px;
}
 
 
/* sticky nav toggler */
#fa_sticky_toggle {
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnida11.png') no-repeat 0 0 #333;
  border:1px solid #222;
  border-right:none;
  display:inline-block;
  height:29px;
  width:30px;
  position:fixed;
  right:0;
  z-index:999;
  transition:top 200ms linear;
}
 
#fa_sticky_toggle:hover { background-position:-30px 0 }
 
 
/* make hidden toolbar similar to toggler */
#fa_toolbar_hidden {
  border-radius:0 !important;
  border:1px solid #222;
  border-right:0;
  border-top:0;
}
 
 
/* post offset fix */
.post div[style*="-30px;"] {
  top:-60px !important;
}

tongue

أيضاً لا يعمل.. أعتقد أنه الـCSS .. لأن هذه الأسماء ليست موجودة في النسخة الثالثة.. و لم يتغير شكل الـبار.
عموماً شكراً لك.





@assemDz كتب:اهلا أخي :
عيدكم مبارك
تفضل هاهو الكود :

ضع هذا في الجافا سكريبت :

الكود:

$("document").ready(function($){
    var nav = $('a.mainmenu');

    $(window).scroll(function () {
        if ($(this).scrollTop() > 125) {
            nav.addClass("assemDz");
        } else {
            nav.removeClass("assemDz");
        }
    });
});

ثم توجه الى ورقة css :

الكود:

.assemDz{  
    z-index: 999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}

تحياتي
الكود يعمل.. لكن كل الأزرار فوق بعضها!
avatar
keko_ferkeko
 
 

ذكر
عدد المساهمات : 562
معدل النشاط : 4052
السُمعة : 0

http://nf-son.forumotion.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف Michael_vx في الأربعاء 6 يوليو 2016 - 14:03

@keko_ferkeko كتب:شكراً مايكل على المساعدة   Cool
للأسف الكود لم يعمل! لا أعرف بالظبط ما المشكلة.. لكني جربت كل الأكواد المكتوبة و لم تفلح Sad
اولا عليك باخذ كود CSS واحد فقط على حسب تفضيلك
ثانيا كود الجافا سكربت فى اى مكان الجافا سكربت
لا تضع جميع الاكواد لم اقل ضع جميع الاكواد انت بذلك ستعطل عملها
فى ورقة الCSS
اذا كنت تريد اللون الفاتح (ابيض)
ضع هذا

الكود:
/* مايكل سوفت sticky nav main */
#fa_sticky_nav {
  font-size:0; /* hide whitespace */
  text-align:center;
  background:#FAFAFA;
  border-bottom:1px solid #CCC !important;
  height:30px;
  position:fixed;
  right:0;
  z-index:999;
  overflow:hidden;
  transition:top 200ms linear, width 600ms ease-in-out;
}

#fa_sticky_nav li { display:inline } /* navlist adjustment */


/* sticky menu links */
#fa_sticky_nav a.mainmenu {
  color:#39C;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  background:url('http://i18.servimg.com/u/f18/18/45/41/65/nav10.png') repeat-x 0px 30px;
  display:inline-block;
  padding:0 10px;
  height:30px;
  line-height:30px;
  transition:200ms;
}

#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
  background-position:0 25px;
}


/* sticky nav toggler */
#fa_sticky_toggle {
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnibo10.png') no-repeat 0 0 #FAFAFA;
  border:1px solid #CCC;
  border-right:none;
  display:inline-block;
  height:29px;
  width:30px;
  position:fixed;
  right:0;
  z-index:999;
  transition:top 200ms linear;
}

#fa_sticky_toggle:hover { background-position:-30px 0 }


/* make hidden toolbar similar to toggler */
#fa_toolbar_hidden {
  border-radius:0 !important;
  border:1px solid #CCC;
  border-right:0;
  border-top:0;
}


/* post offset fix */
.post div[style*="-30px;"] {
  top:-60px !important;
}
اما اذا كنت تريد اللون الغامق (اسود او رمادى)
فلا تضع الكود السابق واضف التالى

الكود:
/* مايكل سوفت sticky nav main */
#fa_sticky_nav {
  font-size:0; /* hide whitespace */
  text-align:center;
  background:#333;
  border-bottom:1px solid #222 !important;
  height:30px;
  position:fixed;
  right:0;
  z-index:999;
  overflow:hidden;
  transition:top 200ms linear, width 600ms ease-in-out;
}

#fa_sticky_nav li { display:inline } /* navlist adjustment */


/* sticky menu links */
#fa_sticky_nav a.mainmenu {
  color:#CCC;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/row10.gif') repeat-x 0px 30px;
  display:inline-block;
  padding:0 10px;
  height:30px;
  line-height:30px;
  transition:200ms;
}

#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
  color:#FFF;
  background-position:0 25px;
}


/* sticky nav toggler */
#fa_sticky_toggle {
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnida11.png') no-repeat 0 0 #333;
  border:1px solid #222;
  border-right:none;
  display:inline-block;
  height:29px;
  width:30px;
  position:fixed;
  right:0;
  z-index:999;
  transition:top 200ms linear;
}

#fa_sticky_toggle:hover { background-position:-30px 0 }


/* make hidden toolbar similar to toggler */
#fa_toolbar_hidden {
  border-radius:0 !important;
  border:1px solid #222;
  border-right:0;
  border-top:0;
}


/* post offset fix */
.post div[style*="-30px;"] {
  top:-60px !important;
}
ثم فى الجافا سكربت اضف التالى فى ادارة اكواد الجافا سكربت

الكود:

(function() {

  if (!window.FA) window.FA = {};
  if (FA.Nav) {
    if (window.console && console.warn) console.warn('FA.Nav has already been defined');
    return;
  }

  FA.Nav = {
  
    // TARGET NODES BY VERSION
    // PHPBB2  : .bodyline > table + table
    // PHPBB3  : #page-header .navlinks
    // PUNBB    : #pun-navlinks
    // INVISION : #submenu
    targetNode : '#page-header .navlinks',
  
    customNav : '', // custom navlinks
  
    keepDefault : true, // keep the default navlinks
    collapsible : true, // show hide button
  
  
    // offset states
    offsets : {
      tbVisible : {
        bottom : 30,
        top : '30px'
      },
    
      tbHidden : {
        bottom : 0,
        top : '0px'
      },
    
      toggler : '30px'
    },
  
    activeOffset : {}, // active offset for the sticky nav
  
    visible : false, // sticky nav is visible
  
    // check the state of the static nav
    checkState : function() {
      if (!FA.Nav.animating) {
        var hidden = FA.Nav.barStatic.getBoundingClientRect().bottom <= FA.Nav.activeOffset.bottom;
    
        if (hidden && FA.Nav.barSticky.style.top != FA.Nav.activeOffset.top) {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = FA.Nav.offsets.toggler;
          FA.Nav.barSticky.style.top = FA.Nav.activeOffset.top;
          FA.Nav.visible = true;
        } else if (!hidden && FA.Nav.barSticky.style.top != '-30px') {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = '-30px';
          FA.Nav.barSticky.style.top = '-30px';
          FA.Nav.visible = false;
        }
      }
    },
  
    animating : false, // sticky nav is animating
  
    // animate the sticky nav when the toolbar is toggled
    animate : function() {
      if (FA.Nav.visible) {
        FA.Nav.animating = true;
        FA.Nav.barSticky.style.transition = 'none';
    
        $(FA.Nav.barSticky).animate({
          top : FA.Nav.activeOffset.top
        }, function() {
          FA.Nav.barSticky.style.transition = '';
          FA.Nav.animating = false;
          FA.Nav.checkState();
        });
      }
    },
  
    // toggle sticky navigation and remember preference via cookies
    toggle : function() {
      if (FA.Nav.barSticky.style.width == '100%') {
        my_setcookie('fa_sticky_nav', 'hidden');
        FA.Nav.barSticky.style.width = '0%';
      } else {
        my_setcookie('fa_sticky_nav', 'shown');
        FA.Nav.barSticky.style.width = '100%';
      }
      return false;
    }
  
  };
 
  $(function() {
    // set default offsets based on toolbar state
  
  FA.Nav.activeOffset = (my_getcookie('toolbar_state') == 'fa_hide' ||
!_userdata.activate_toolbar) ? FA.Nav.offsets.tbHidden :
FA.Nav.offsets.tbVisible;
    if (!_userdata.activate_toolbar) FA.Nav.offsets.toggler = '0px';
  
    // find the static nav
  
  FA.Nav.barStatic = document.querySelector ?
document.querySelector(FA.Nav.targetNode) : $(FA.Nav.targetNode)[0]; //
static nav
  
    if (FA.Nav.barStatic) {
      FA.Nav.barSticky = FA.Nav.barStatic.cloneNode(FA.Nav.keepDefault); // clone static nav
      if (FA.Nav.customNav) FA.Nav.barSticky.insertAdjacentHTML('beforeEnd', FA.Nav.customNav);
      FA.Nav.barSticky.id = 'fa_sticky_nav';
      FA.Nav.barSticky.style.width = my_getcookie('fa_sticky_nav') == 'hidden' ? '0%' : '100%';
      FA.Nav.barSticky.style.top = '-30px';
        
      document.body.appendChild(FA.Nav.barSticky); // append the sticky one
        
      // sticky nav toggler
      if (FA.Nav.collapsible) {
        FA.Nav.toggler = document.createElement('A');
        FA.Nav.toggler.id = 'fa_sticky_toggle';
        FA.Nav.toggler.href = '#';
        FA.Nav.toggler.style.top = '-30px';
        FA.Nav.toggler.onclick = FA.Nav.toggle;
        
        document.body.appendChild(FA.Nav.toggler);
      };
      
      window.onscroll = FA.Nav.checkState; // check state on scroll
      FA.Nav.checkState(); // startup check
    
      // toolbar modifications
      $(function() {
        // animate sticky nav and change offsets when the toolbar is toggled
        $('#fa_hide').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbHidden;
          FA.Nav.animate();
        });
      
        $('#fa_show').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbVisible;
          FA.Nav.animate();
        });
      });
    }
  });
}());
تاكد انك حذفت الاكواد القديمة ثم جرب اذا لم يعمل ارفق رابط منتداك ولا تغير شىء لحين اتمام فحص المنتدى ومعرفة نوعيه الخطاء الذى يعطل الكود

Michael_vx
 
 

ذكر
عدد المساهمات : 1566
معدل النشاط : 5655
السُمعة : 69

http://miccsoft.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف keko_ferkeko في الأربعاء 6 يوليو 2016 - 14:33

شكراً على المتابعة..
للأسف لا تزال نفس المشكلة.
http://nf-son.yoo7.com
avatar
keko_ferkeko
 
 

ذكر
عدد المساهمات : 562
معدل النشاط : 4052
السُمعة : 0

http://nf-son.forumotion.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف Michael_vx في الأربعاء 6 يوليو 2016 - 14:39

يوجد مشكلة فى هذا الجزىء اعتقد انه مضاف بواستطك انت
http://nf-son.yoo7.com/99364.js
الكود:
(function(){'DEVELOPED BY ANGE TUTEUR';'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';'ORIGIN : http://fmdesign.forumotion.com/t530-simple-theme-changer#7800';var version=1;window.fa_theme_color={version:version,delay:500,transition:1000,transition_all:false,attachTo:['.bodyline > table:first-child','#page-header','#pun-head','#submenu'][version],selected:my_getcookie('fa_theme_color')||'Select a theme',palette:{'Select a theme':'','Random theme':[],'Rainbow':'','Persian Red':['#D44','#C33','#B22','#900','#522'],'Chestnut Rose':['#D77','#C66','#B55','#933','#533'],'Eunry':['#DAA','#C99','#B88','#966','#544'],'Tuscany':['#D64','#C63','#B52','#930','#532'],'Antique Brass':['#DA7','#C96','#B85','#963','#543'],'Hokey Pokey':['#DA4','#C93','#B82','#960','#542'],'Earls Green':['#DD4','#CC3','#BB2','#990','#552'],'Laser':['#DD7','#CC6','#BB5','#993','#553'],'Pine Glade':['#DDA','#CC9','#BB8','#996','#554'],'Celery':['#AD4','#9C3','#8B2','#690','#452'],'Wild Willow':['#AD7','#9C6','#8B5','#693','#453'],'Atlantis':['#7D4','#6C3','#5B2','#390','#352'],'Apple':['#4D4','#3C3','#2B2','#090','#252'],'Mantis':['#7D7','#6C6','#5B5','#393','#353'],'De York':['#ADA','#9C9','#8B8','#696','#454'],'Mountain Meadow':['#4D7','#3C6','#2B5','#093','#253'],'Emerald':['#7DA','#6C9','#5B8','#396','#354'],'Shamrock':['#4DA','#3C9','#2B8','#096','#254'],'Turquoise':['#4DD','#3CC','#2BB','#099','#255'],'Downy':['#7DD','#6CC','#5BB','#399','#355'],'Sinbad':['#ADD','#9CC','#8BB','#699','#455'],'Curious Blue':['#4AD','#39C','#28B','#069','#245'],'Danube':['#7AD','#69C','#58B','#369','#345'],'Mariner':['#47D','#36C','#25B','#039','#235'],'Governor Bay':['#44D','#33C','#22B','#009','#225'],'Blue Marguerite':['#77D','#66C','#55B','#339','#335'],'Blue Bell':['#AAD','#99C','#88B','#669','#445'],'Purple Heart':['#74D','#63C','#52B','#309','#325'],'Amethyst':['#A7D','#96C','#85B','#639','#435'],'Purple':['#A4D','#93C','#82B','#609','#425'],'Cerise':['#D4D','#C3C','#B2B','#909','#525'],'Fuchsia Pink':['#D7D','#C6C','#B5B','#939','#535'],'Lilac':['#DAD','#C9C','#B8B','#969','#545'],'Red Violet':['#D4A','#C39','#B28','#906','#524'],'Hopbush':['#D7A','#C69','#B58','#936','#534'],'Hibiscus':['#D47','#C36','#B25','#903','#523']},change:function(color,select){var head=$('head'),style=document.getElementById('fa_theme_style');my_setcookie('fa_theme_color',color);if(style){head[0].removeChild(style)}

يبدو انه السبب الرئيسى فى عدم تفعيل الكود الخاص بالناف بار

Michael_vx
 
 

ذكر
عدد المساهمات : 1566
معدل النشاط : 5655
السُمعة : 69

http://miccsoft.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف Michael_vx في الأربعاء 6 يوليو 2016 - 15:00

اذا لم تكن قادرا على الوصول الى الخطاء الذى اراه فى الفحص قم بتفعيل عضويتى
ومنحها صلاحيه الدخول للوحة الادارة وسابحث عن الكود بنفسى
هذا اذا كنت تريد
هذا الاختيار ليس اجباريا

Michael_vx
 
 

ذكر
عدد المساهمات : 1566
معدل النشاط : 5655
السُمعة : 69

http://miccsoft.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف keko_ferkeko في الخميس 7 يوليو 2016 - 8:25

أشكرك كثيراً على التعاون.. تم تفعيل عضويتك.. أرجو أن تستطيع حل هذه المشكلة.
avatar
keko_ferkeko
 
 

ذكر
عدد المساهمات : 562
معدل النشاط : 4052
السُمعة : 0

http://nf-son.forumotion.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف Michael_vx في الخميس 7 يوليو 2016 - 18:36

حسنا
سارى مايمكننى فعله

Michael_vx
 
 

ذكر
عدد المساهمات : 1566
معدل النشاط : 5655
السُمعة : 69

http://miccsoft.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف Michael_vx في الخميس 7 يوليو 2016 - 18:57

العيب ليس من عندك فى المنتدى اخى الحبيب
العيب من نقل الكود من الدعم هنا
هندما اسحب الكود نسخ لصق والذى اضعه بالرد هنا لا يعمل
وعندما اسحب الكود من موقعى نسخ لصق الى منتداك فانه يعمل
ويمكنك رؤية النتيجة بنفسك
تحياتى لك

Michael_vx
 
 

ذكر
عدد المساهمات : 1566
معدل النشاط : 5655
السُمعة : 69

http://miccsoft.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف SaLEm Hen!CHE في الخميس 7 يوليو 2016 - 19:01

السلام عليكم ،
بعد إذن السادة أعلاه Cool
@keko_ferkeko
تفضل غير كود الجافا الحالي بهذا : :
الكود:
(function() {

  if (!window.FA) window.FA = {};
  if (FA.Nav) {
    if (window.console && console.warn) console.warn('FA.Nav has already been defined');
    return;
  }

  FA.Nav = {
  
    // TARGET NODES BY VERSION
    // PHPBB2  : .bodyline > table + table
    // PHPBB3  : #page-header .navlinks
    // PUNBB    : #pun-navlinks
    // INVISION : #submenu
    targetNode : '#page-header .navlinks',
  
    customNav : '', // custom navlinks
  
    keepDefault : true, // keep the default navlinks
    collapsible : true, // show hide button
  
  
    // offset states
    offsets : {
      tbVisible : {
        bottom : 30,
        top : '30px'
      },
    
      tbHidden : {
        bottom : 0,
        top : '0px'
      },
    
      toggler : '30px'
    },
  
    activeOffset : {}, // active offset for the sticky nav
  
    visible : true, // sticky nav is visible
  
    // check the state of the static nav
    checkState : function() {
      if (!FA.Nav.animating) {
        var hidden = FA.Nav.barStatic.getBoundingClientRect().bottom <= FA.Nav.activeOffset.bottom;
    
        if (hidden && FA.Nav.barSticky.style.top != FA.Nav.activeOffset.top) {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = FA.Nav.offsets.toggler;
          FA.Nav.barSticky.style.top = FA.Nav.activeOffset.top;
          FA.Nav.visible = true;
        } else if (!hidden && FA.Nav.barSticky.style.top != '30px') {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = '30px';
          FA.Nav.barSticky.style.top = '30px';
          FA.Nav.visible = false;
        }
      }
    },
  
    animating : false, // sticky nav is animating
  
    // animate the sticky nav when the toolbar is toggled
    animate : function() {
      if (FA.Nav.visible) {
        FA.Nav.animating = true;
        FA.Nav.barSticky.style.transition = 'none';
    
        $(FA.Nav.barSticky).animate({
          top : FA.Nav.activeOffset.top
        }, function() {
          FA.Nav.barSticky.style.transition = '';
          FA.Nav.animating = false;
          FA.Nav.checkState();
        });
      }
    },
  
    // toggle sticky navigation and remember preference via cookies
    toggle : function() {
      if (FA.Nav.barSticky.style.width == '100%') {
        my_setcookie('fa_sticky_nav', 'hidden');
        FA.Nav.barSticky.style.width = '0%';
      } else {
        my_setcookie('fa_sticky_nav', 'shown');
        FA.Nav.barSticky.style.width = '100%';
      }
      return false;
    }
  
  };
 
  $(function() {
    // set default offsets based on toolbar state
    FA.Nav.activeOffset = (my_getcookie('toolbar_state') == 'fa_hide' || !_userdata.activate_toolbar) ? FA.Nav.offsets.tbHidden : FA.Nav.offsets.tbVisible;
    if (!_userdata.activate_toolbar) FA.Nav.offsets.toggler = '0px';
  
    // find the static nav
    FA.Nav.barStatic = document.querySelector ? document.querySelector(FA.Nav.targetNode) : $(FA.Nav.targetNode)[0]; // static nav
  
    if (FA.Nav.barStatic) {
      FA.Nav.barSticky = FA.Nav.barStatic.cloneNode(FA.Nav.keepDefault); // clone static nav
      if (FA.Nav.customNav) FA.Nav.barSticky.insertAdjacentHTML('beforeEnd', FA.Nav.customNav);
      FA.Nav.barSticky.id = 'fa_sticky_nav';
      FA.Nav.barSticky.style.width = my_getcookie('fa_sticky_nav') == 'hidden' ? '0%' : '100%';
      FA.Nav.barSticky.style.top = '30px';
        
      document.body.appendChild(FA.Nav.barSticky); // append the sticky one
        
      // sticky nav toggler
      if (FA.Nav.collapsible) {
        FA.Nav.toggler = document.createElement('A');
        FA.Nav.toggler.id = 'fa_sticky_toggle';
        FA.Nav.toggler.href = '#';
        FA.Nav.toggler.style.top = '30px';
        FA.Nav.toggler.onclick = FA.Nav.toggle;
        
        document.body.appendChild(FA.Nav.toggler);
      };
      
      window.onscroll = FA.Nav.checkState; // check state on scroll
      FA.Nav.checkState(); // startup check
    
      // toolbar modifications
      $(function() {
        // animate sticky nav and change offsets when the toolbar is toggled
        $('#fa_hide').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbHidden;
          FA.Nav.animate();
        });
      
        $('#fa_show').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbVisible;
          FA.Nav.animate();
        });
      });
    }
  });
}());
avatar
SaLEm Hen!CHE
 
 

ذكر
عدد المساهمات : 759
معدل النشاط : 4738
السُمعة : 60

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف keko_ferkeko في الخميس 7 يوليو 2016 - 20:50

@Michael_vx كتب:العيب ليس من عندك فى المنتدى اخى الحبيب
العيب من نقل الكود من الدعم هنا
هندما اسحب الكود نسخ لصق والذى اضعه بالرد هنا لا يعمل
وعندما اسحب الكود من موقعى نسخ لصق الى منتداك فانه يعمل
ويمكنك رؤية النتيجة بنفسك
تحياتى لك
كنت أكاد أن أجن  What a Face .. شكراً على تعبك معايا.. هناك مشكلة أخيرة أن العارضة تظهر مرتين في الصفحة! كيف أخفي واحدة منهم؟



@SaLEm Hen!CHE كتب:السلام عليكم ،
بعد إذن السادة أعلاه Cool
@keko_ferkeko
تفضل غير كود الجافا الحالي بهذا : :
الكود:
(function() {

  if (!window.FA) window.FA = {};
  if (FA.Nav) {
    if (window.console && console.warn) console.warn('FA.Nav has already been defined');
    return;
  }

  FA.Nav = {
  
    // TARGET NODES BY VERSION
    // PHPBB2  : .bodyline > table + table
    // PHPBB3  : #page-header .navlinks
    // PUNBB    : #pun-navlinks
    // INVISION : #submenu
    targetNode : '#page-header .navlinks',
  
    customNav : '', // custom navlinks
  
    keepDefault : true, // keep the default navlinks
    collapsible : true, // show hide button
  
  
    // offset states
    offsets : {
      tbVisible : {
        bottom : 30,
        top : '30px'
      },
    
      tbHidden : {
        bottom : 0,
        top : '0px'
      },
    
      toggler : '30px'
    },
  
    activeOffset : {}, // active offset for the sticky nav
  
    visible : true, // sticky nav is visible
  
    // check the state of the static nav
    checkState : function() {
      if (!FA.Nav.animating) {
        var hidden = FA.Nav.barStatic.getBoundingClientRect().bottom <= FA.Nav.activeOffset.bottom;
    
        if (hidden && FA.Nav.barSticky.style.top != FA.Nav.activeOffset.top) {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = FA.Nav.offsets.toggler;
          FA.Nav.barSticky.style.top = FA.Nav.activeOffset.top;
          FA.Nav.visible = true;
        } else if (!hidden && FA.Nav.barSticky.style.top != '30px') {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = '30px';
          FA.Nav.barSticky.style.top = '30px';
          FA.Nav.visible = false;
        }
      }
    },
  
    animating : false, // sticky nav is animating
  
    // animate the sticky nav when the toolbar is toggled
    animate : function() {
      if (FA.Nav.visible) {
        FA.Nav.animating = true;
        FA.Nav.barSticky.style.transition = 'none';
    
        $(FA.Nav.barSticky).animate({
          top : FA.Nav.activeOffset.top
        }, function() {
          FA.Nav.barSticky.style.transition = '';
          FA.Nav.animating = false;
          FA.Nav.checkState();
        });
      }
    },
  
    // toggle sticky navigation and remember preference via cookies
    toggle : function() {
      if (FA.Nav.barSticky.style.width == '100%') {
        my_setcookie('fa_sticky_nav', 'hidden');
        FA.Nav.barSticky.style.width = '0%';
      } else {
        my_setcookie('fa_sticky_nav', 'shown');
        FA.Nav.barSticky.style.width = '100%';
      }
      return false;
    }
  
  };
 
  $(function() {
    // set default offsets based on toolbar state
    FA.Nav.activeOffset = (my_getcookie('toolbar_state') == 'fa_hide' || !_userdata.activate_toolbar) ? FA.Nav.offsets.tbHidden : FA.Nav.offsets.tbVisible;
    if (!_userdata.activate_toolbar) FA.Nav.offsets.toggler = '0px';
  
    // find the static nav
    FA.Nav.barStatic = document.querySelector ? document.querySelector(FA.Nav.targetNode) : $(FA.Nav.targetNode)[0]; // static nav
  
    if (FA.Nav.barStatic) {
      FA.Nav.barSticky = FA.Nav.barStatic.cloneNode(FA.Nav.keepDefault); // clone static nav
      if (FA.Nav.customNav) FA.Nav.barSticky.insertAdjacentHTML('beforeEnd', FA.Nav.customNav);
      FA.Nav.barSticky.id = 'fa_sticky_nav';
      FA.Nav.barSticky.style.width = my_getcookie('fa_sticky_nav') == 'hidden' ? '0%' : '100%';
      FA.Nav.barSticky.style.top = '30px';
        
      document.body.appendChild(FA.Nav.barSticky); // append the sticky one
        
      // sticky nav toggler
      if (FA.Nav.collapsible) {
        FA.Nav.toggler = document.createElement('A');
        FA.Nav.toggler.id = 'fa_sticky_toggle';
        FA.Nav.toggler.href = '#';
        FA.Nav.toggler.style.top = '30px';
        FA.Nav.toggler.onclick = FA.Nav.toggle;
        
        document.body.appendChild(FA.Nav.toggler);
      };
      
      window.onscroll = FA.Nav.checkState; // check state on scroll
      FA.Nav.checkState(); // startup check
    
      // toolbar modifications
      $(function() {
        // animate sticky nav and change offsets when the toolbar is toggled
        $('#fa_hide').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbHidden;
          FA.Nav.animate();
        });
      
        $('#fa_show').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbVisible;
          FA.Nav.animate();
        });
      });
    }
  });
}());
أشكرك كثيراً.. لكن من الواضح أن الكود في مشكلة لإنه نفس الكود في أعلى و ما تزال العارضة تظهر مرتين في الصفحة!
avatar
keko_ferkeko
 
 

ذكر
عدد المساهمات : 562
معدل النشاط : 4052
السُمعة : 0

http://nf-son.forumotion.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف SaLEm Hen!CHE في الخميس 7 يوليو 2016 - 20:58

طيب ،
هذا لجعلها ثابتة تبقى في مكانها في الاعلى عند النزول :
غير كود الـــ CSS (اللون الابيض) بهذا:
الكود:
/* مايكل سوفت sticky nav main */
#fa_sticky_nav {
  font-size:0; /* hide whitespace */
  text-align:center;
  background:#FAFAFA;
  border-bottom:1px solid #CCC !important;
  height:30px;
  position:absolute;
  right:0;
  z-index:999;
  overflow:hidden;
  transition:top 200ms linear, width 600ms ease-in-out;
}

#fa_sticky_nav li { display:inline } /* navlist adjustment */


/* sticky menu links */
#fa_sticky_nav a.mainmenu {
  color:#39C;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  background:url('http://i18.servimg.com/u/f18/18/45/41/65/nav10.png') repeat-x 0px 30px;
  display:inline-block;
  padding:0 10px;
  height:30px;
  line-height:30px;
  transition:200ms;
}

#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
  background-position:0 25px;
}


/* sticky nav toggler */
#fa_sticky_toggle {
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnibo10.png') no-repeat 0 0 #FAFAFA;
  border:1px solid #CCC;
  border-right:none;
  display:inline-block;
  height:29px;
  width:30px;
  position:absolute;
  right:0;
  z-index:999;
  transition:top 200ms linear;
}

#fa_sticky_toggle:hover { background-position:-30px 0 }


/* make hidden toolbar similar to toggler */
#fa_toolbar_hidden {
  border-radius:0 !important;
  border:1px solid #CCC;
  border-right:0;
  border-top:0;
}


/* post offset fix */
.post div[style*="-30px;"] {
  top:-60px !important;
}

... Question يمكنك إخبارنا بالمكان الذي تريد تثبيت الناف بار به
avatar
SaLEm Hen!CHE
 
 

ذكر
عدد المساهمات : 759
معدل النشاط : 4738
السُمعة : 60

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف keko_ferkeko في الخميس 7 يوليو 2016 - 21:29

أنا بدلت الكود.. الآن أصبح بار واحد لكنه ثابت لا يتحرك!
http://nf-son.yoo7.com

إذا ممكن .. تسجل و تظبطه لي؟
avatar
keko_ferkeko
 
 

ذكر
عدد المساهمات : 562
معدل النشاط : 4052
السُمعة : 0

http://nf-son.forumotion.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف SaLEm Hen!CHE في الخميس 7 يوليو 2016 - 21:44

طيب ... صف لي كيف تريده بالظبط حتى احاول جعله كما تريد لاني لم افهم ما تريد بالظبط ظننت انك تريد التثبيت فقط..؟
avatar
SaLEm Hen!CHE
 
 

ذكر
عدد المساهمات : 759
معدل النشاط : 4738
السُمعة : 60

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف keko_ferkeko في الخميس 7 يوليو 2016 - 22:32

@SaLEm Hen!CHE كتب:طيب ... صف لي كيف تريده بالظبط حتى احاول جعله كما تريد لاني لم افهم ما تريد بالظبط ظننت انك تريد التثبيت فقط..؟

أنا عارف إني تعبتكم معي كثيراً جداً  Embarassed
كل ما أريده هو : عارضة المنتدى (ناف بار) في أعلى المتصفحة عند التحرك لأسفل الصفحة.

خالص تحياتي؛
avatar
keko_ferkeko
 
 

ذكر
عدد المساهمات : 562
معدل النشاط : 4052
السُمعة : 0

http://nf-son.forumotion.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: كود تثبيت الناف أعلى المتصفح

مُساهمة من طرف SaLEm Hen!CHE في الخميس 7 يوليو 2016 - 22:50

تمام يا غالي ... ما رأيك الان .. عاين المنتدى الان ..؟
بخصوص الناف بار الاصلي سأنزعه لا مشكلة ..
avatar
SaLEm Hen!CHE
 
 

ذكر
عدد المساهمات : 759
معدل النشاط : 4738
السُمعة : 60

الرجوع الى أعلى الصفحة اذهب الى الأسفل

صفحة 1 من اصل 2 1, 2  الصفحة التالية

الرجوع الى أعلى الصفحة


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى