Posted 20 мая, 20177 yr comment_129015 Доброго времени суток. Не могли бы вы подсказать как сделать что ты при проматывании форума NavBar оставался в верху, а не со скролом странички пропадал. вот две картинки ДО промотки: И после промотки: Link to comment https://ipbmafia.ru/topic/17424-peremeshenie-navbar/ Share on other sites Больше вариантов
20 мая, 20177 yr comment_129017 Как по мне наоборот хорошо что едет)) Link to comment https://ipbmafia.ru/topic/17424-peremeshenie-navbar/?&do=findComment&comment=129017 Share on other sites Больше вариантов
20 мая, 20177 yr Author comment_129019 2 минуты назад, Arhangel сказал: Как по мне наоборот хорошо что едет)) кому как, мне бы хотелесь что бы строка была всегда под рукой, что бы не перематывать постоянно форум) Link to comment https://ipbmafia.ru/topic/17424-peremeshenie-navbar/?&do=findComment&comment=129019 Share on other sites Больше вариантов
20 мая, 20177 yr comment_129024 ставь тему ips focus. либо ковыряйся в этом скрипте, чтобы настроить под себя, но там придется и стили импортировать и еще кучу всего сделать, не думаю, что осилишь $("html").addClass('ipsfocus_bg1'); $(document).ready(function(){ function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; // Firefox calculates width differently due to scrollbar on Windows if( navigator.userAgent.toLowerCase().indexOf('firefox') > -1 ){ var browserResponsiveWidth = 963; }else{ var browserResponsiveWidth = 980; } // Relocate search bar var relocateSearch = function(){ var currentBrowserWidth = $(window).width(); if(currentBrowserWidth > browserResponsiveWidth){ $("#elSearch").prependTo("#searchWrap"); } else { $("#elSearch").prependTo("#respSearch"); } } relocateSearch(); var resizeWindow = function(){ var currentBrowserWidth = $(window).width(); if(currentBrowserWidth > browserResponsiveWidth){ // Desktops $("#elSearch").prependTo("#searchWrap"); $("body").addClass("ipsfocus_desktop"); } else { // Tablets and mobiles $("#elSearch").prependTo("#respSearch"); $("body").removeClass("ipsfocus_desktop"); } } resizeWindow(); // Bug fix: The resize event is triggered when tablets and mobiles are scrolled, breaking the search bar in Android and Chrome var cachedWidth = $(window).width(); // Run width functions after 100ms pause $(window).resize(debounce(function(){ var newWidth = $(window).width(); if(newWidth !== cachedWidth){ resizeWindow(); relocateSearch(); cachedWidth = newWidth; } }, 100)); // Hide post controls as a guest to prevent empty bar $(".cPost .ipsComment_controls li.ipsHide:only-child").parent().hide(); // Hide gallery descriptions if they don't exist if ($('.galleryDescription .ipsType_richText').is(':empty')){ $(".galleryDescription").hide(); } // Hide empty divs in ipsPageHeader to prevent unnecessary margins $('.ipsPageHeader .ipsSpacer_top').each(function(){ if(!/[\S]/.test($(this).html())) { $(this).hide(); } }); /* Navigation */ function ipsfocusNavigation() { var navwidth = 0; var morewidth = $('.ipsNavBar_primary .focusNav_more').outerWidth(true); $('.ipsNavBar_primary > ul > li:not(.focusNav_more)').each(function() { navwidth += $(this).outerWidth( true ); }); var availablespace = $('.ipsNavBar_primary').outerWidth(true) - morewidth; if (availablespace > 0 && navwidth > availablespace) { var lastItem = $('.ipsNavBar_primary > ul > li:not(.focusNav_more)').last(); lastItem.attr('data-width', lastItem.outerWidth(true)); lastItem.prependTo($('.ipsNavBar_primary .focusNav_more > ul')); ipsfocusNavigation(); } else { var firstMoreElement = $('.ipsNavBar_primary li.focusNav_more li').first(); if (navwidth + firstMoreElement.data('width') < availablespace) { firstMoreElement.insertBefore($('.ipsNavBar_primary .focusNav_more')); } } if ($('.focusNav_more li').length > 0) { $('.focusNav_more').css('display','inline-block'); } else { $('.focusNav_more').css('display','none'); } } $(window).on('load',function(){ $(".navAlign").removeClass("hiddenLinks"); ipsfocusNavigation(); }); $(window).on('resize',function(){ ipsfocusNavigation(); }); // Make hover navigation work with touch devices // http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly ;(function(e,t,n,r){e.fn.doubleTapToGo=function(r){if(!("ontouchstart"in t)&&!navigator.msMaxTouchPoints&&!navigator.userAgent.toLowerCase().match(/windows phone os 7/i))return false;this.each(function(){var t=false;e(this).on("click",function(n){var r=e(this);if(r[0]!=t[0]){n.preventDefault();t=r}});e(n).on("click touchstart MSPointerDown",function(n){var r=true,i=e(n.target).parents();for(var s=0;s<i.length;s++)if(i[s]==t[0])r=false;if(r)t=false})});return this}})(jQuery,window,document); $('.ipsNavBar_primary > ul > li:has(ul)').doubleTapToGo(); var browserResponsiveWidth = 980; var defaultBrowserWidth = $(window).width(); var headerHeight = $("#header").height(); var headerWrap = $(".headerWrap"); var headerBackgrounds = $(".headerBackgrounds"); var headerBlur = $(".headerBlur"); var blurEnd = 110; var headerEffects = function(){ var amountScrolled = $(window).scrollTop(); // Make navigation fixed if( amountScrolled >= headerHeight ){ headerWrap.addClass("fixedBlur"); } else { headerWrap.removeClass("fixedBlur"); } // Blur header if( (amountScrolled <= blurEnd) ){ headerWrap.removeClass("blurred"); } else { headerWrap.addClass("blurred"); } // Parallax effect var translateHeader = amountScrolled / 2; if( amountScrolled <= headerHeight ){ headerBackgrounds.css( "margin-top", translateHeader + "px" ); } else { headerBackgrounds.css( "margin-top", (headerHeight / 2) + "px" ); } } if( $('body').hasClass('ipsfocus_desktop') ){ $(window).scroll(function(){ headerEffects(); }); }; }); Link to comment https://ipbmafia.ru/topic/17424-peremeshenie-navbar/?&do=findComment&comment=129024 Share on other sites Больше вариантов
20 мая, 20177 yr Author comment_129026 8 минут назад, Envy сказал: ставь тему ips focus. либо ковыряйся в этом скрипте, чтобы настроить под себя, но там придется и стили импортировать и еще кучу всего сделать, не думаю, что осилишь $("html").addClass('ipsfocus_bg1'); $(document).ready(function(){ function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; // Firefox calculates width differently due to scrollbar on Windows if( navigator.userAgent.toLowerCase().indexOf('firefox') > -1 ){ var browserResponsiveWidth = 963; }else{ var browserResponsiveWidth = 980; } // Relocate search bar var relocateSearch = function(){ var currentBrowserWidth = $(window).width(); if(currentBrowserWidth > browserResponsiveWidth){ $("#elSearch").prependTo("#searchWrap"); } else { $("#elSearch").prependTo("#respSearch"); } } relocateSearch(); var resizeWindow = function(){ var currentBrowserWidth = $(window).width(); if(currentBrowserWidth > browserResponsiveWidth){ // Desktops $("#elSearch").prependTo("#searchWrap"); $("body").addClass("ipsfocus_desktop"); } else { // Tablets and mobiles $("#elSearch").prependTo("#respSearch"); $("body").removeClass("ipsfocus_desktop"); } } resizeWindow(); // Bug fix: The resize event is triggered when tablets and mobiles are scrolled, breaking the search bar in Android and Chrome var cachedWidth = $(window).width(); // Run width functions after 100ms pause $(window).resize(debounce(function(){ var newWidth = $(window).width(); if(newWidth !== cachedWidth){ resizeWindow(); relocateSearch(); cachedWidth = newWidth; } }, 100)); // Hide post controls as a guest to prevent empty bar $(".cPost .ipsComment_controls li.ipsHide:only-child").parent().hide(); // Hide gallery descriptions if they don't exist if ($('.galleryDescription .ipsType_richText').is(':empty')){ $(".galleryDescription").hide(); } // Hide empty divs in ipsPageHeader to prevent unnecessary margins $('.ipsPageHeader .ipsSpacer_top').each(function(){ if(!/[\S]/.test($(this).html())) { $(this).hide(); } }); /* Navigation */ function ipsfocusNavigation() { var navwidth = 0; var morewidth = $('.ipsNavBar_primary .focusNav_more').outerWidth(true); $('.ipsNavBar_primary > ul > li:not(.focusNav_more)').each(function() { navwidth += $(this).outerWidth( true ); }); var availablespace = $('.ipsNavBar_primary').outerWidth(true) - morewidth; if (availablespace > 0 && navwidth > availablespace) { var lastItem = $('.ipsNavBar_primary > ul > li:not(.focusNav_more)').last(); lastItem.attr('data-width', lastItem.outerWidth(true)); lastItem.prependTo($('.ipsNavBar_primary .focusNav_more > ul')); ipsfocusNavigation(); } else { var firstMoreElement = $('.ipsNavBar_primary li.focusNav_more li').first(); if (navwidth + firstMoreElement.data('width') < availablespace) { firstMoreElement.insertBefore($('.ipsNavBar_primary .focusNav_more')); } } if ($('.focusNav_more li').length > 0) { $('.focusNav_more').css('display','inline-block'); } else { $('.focusNav_more').css('display','none'); } } $(window).on('load',function(){ $(".navAlign").removeClass("hiddenLinks"); ipsfocusNavigation(); }); $(window).on('resize',function(){ ipsfocusNavigation(); }); // Make hover navigation work with touch devices // http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly ;(function(e,t,n,r){e.fn.doubleTapToGo=function(r){if(!("ontouchstart"in t)&&!navigator.msMaxTouchPoints&&!navigator.userAgent.toLowerCase().match(/windows phone os 7/i))return false;this.each(function(){var t=false;e(this).on("click",function(n){var r=e(this);if(r[0]!=t[0]){n.preventDefault();t=r}});e(n).on("click touchstart MSPointerDown",function(n){var r=true,i=e(n.target).parents();for(var s=0;s<i.length;s++)if(i[s]==t[0])r=false;if(r)t=false})});return this}})(jQuery,window,document); $('.ipsNavBar_primary > ul > li:has(ul)').doubleTapToGo(); var browserResponsiveWidth = 980; var defaultBrowserWidth = $(window).width(); var headerHeight = $("#header").height(); var headerWrap = $(".headerWrap"); var headerBackgrounds = $(".headerBackgrounds"); var headerBlur = $(".headerBlur"); var blurEnd = 110; var headerEffects = function(){ var amountScrolled = $(window).scrollTop(); // Make navigation fixed if( amountScrolled >= headerHeight ){ headerWrap.addClass("fixedBlur"); } else { headerWrap.removeClass("fixedBlur"); } // Blur header if( (amountScrolled <= blurEnd) ){ headerWrap.removeClass("blurred"); } else { headerWrap.addClass("blurred"); } // Parallax effect var translateHeader = amountScrolled / 2; if( amountScrolled <= headerHeight ){ headerBackgrounds.css( "margin-top", translateHeader + "px" ); } else { headerBackgrounds.css( "margin-top", (headerHeight / 2) + "px" ); } } if( $('body').hasClass('ipsfocus_desktop') ){ $(window).scroll(function(){ headerEffects(); }); }; }); В какой из них?! Link to comment https://ipbmafia.ru/topic/17424-peremeshenie-navbar/?&do=findComment&comment=129026 Share on other sites Больше вариантов
20 мая, 20177 yr comment_129027 так у тебя уже стоит этот шаблон, ищи в настройках значит, на всех форумах где видел ips focus, везде навбар идет за пользователем, значит у тебя эта функция отключена по всей видимости Link to comment https://ipbmafia.ru/topic/17424-peremeshenie-navbar/?&do=findComment&comment=129027 Share on other sites Больше вариантов
20 мая, 20177 yr Author comment_129031 6 минут назад, Envy сказал: так у тебя уже стоит этот шаблон, ищи в настройках значит, на всех форумах где видел ips focus, везде навбар идет за пользователем, значит у тебя эта функция отключена по всей видимости Вот нашёл, так она вроде как и не отключена: Link to comment https://ipbmafia.ru/topic/17424-peremeshenie-navbar/?&do=findComment&comment=129031 Share on other sites Больше вариантов
20 мая, 20177 yr comment_129032 если не работает - наверное отключена? настройки стиля здесь Link to comment https://ipbmafia.ru/topic/17424-peremeshenie-navbar/?&do=findComment&comment=129032 Share on other sites Больше вариантов
20 мая, 20177 yr Author comment_129033 5 минут назад, Envy сказал: если не работает - наверное отключена? настройки стиля здесь Эммм, и где там функция отвевающая за NavBar? Link to comment https://ipbmafia.ru/topic/17424-peremeshenie-navbar/?&do=findComment&comment=129033 Share on other sites Больше вариантов
20 мая, 20177 yr comment_129035 Только что, Elvis DeShulez сказал: Эммм, и где там функция отвевающая за NavBar? я должен этим заниматься? Link to comment https://ipbmafia.ru/topic/17424-peremeshenie-navbar/?&do=findComment&comment=129035 Share on other sites Больше вариантов
20 мая, 20177 yr Author comment_129036 4 минуты назад, Envy сказал: я должен этим заниматься? Нет, но у меня касаемо NavBar там нечего нету, так я и спрашиваю и где та эта функция Link to comment https://ipbmafia.ru/topic/17424-peremeshenie-navbar/?&do=findComment&comment=129036 Share on other sites Больше вариантов
20 мая, 20177 yr comment_129045 Нужно, чтобы NavBar прикреплялся к верху, когда проматываешь? Если да, то в includeJS (шаблон) вставляем скрипт: <script> jQuery(function($) { $(window).scroll(function(){ if($(this).scrollTop()>254){ // Высота шапки, на которой меню присваивается фиксед - высота меню, т.е. NavBar $('#navBar').addClass('fixed'); } else if ($(this).scrollTop()<254){ // Высота шапки, на которой убирается фиксед $('#navBar').removeClass('fixed'); } }); }); </script> p.s. код для форума и дизайна http://pangorarp-forum.ru/ Link to comment https://ipbmafia.ru/topic/17424-peremeshenie-navbar/?&do=findComment&comment=129045 Share on other sites Больше вариантов
20 мая, 20177 yr Author comment_129048 8 минут назад, Axeland сказал: Нужно, чтобы NavBar прикреплялся к верху, когда проматываешь? Если да, то в includeJS (шаблон) вставляем скрипт: <script> jQuery(function($) { $(window).scroll(function(){ if($(this).scrollTop()>254){ // Высота шапки, на которой меню присваивается фиксед - высота меню, т.е. NavBar $('#navBar').addClass('fixed'); } else if ($(this).scrollTop()<254){ // Высота шапки, на которой убирается фиксед $('#navBar').removeClass('fixed'); } }); }); </script> p.s. код для форума и дизайна http://pangorarp-forum.ru/ Не помогло, так же как и было просто проматывается Link to comment https://ipbmafia.ru/topic/17424-peremeshenie-navbar/?&do=findComment&comment=129048 Share on other sites Больше вариантов
20 мая, 20177 yr comment_129049 9 минут назад, Axeland сказал: Нужно, чтобы NavBar прикреплялся к верху, когда проматываешь? Если да, то в includeJS (шаблон) вставляем скрипт: <script> jQuery(function($) { $(window).scroll(function(){ if($(this).scrollTop()>254){ // Высота шапки, на которой меню присваивается фиксед - высота меню, т.е. NavBar $('#navBar').addClass('fixed'); } else if ($(this).scrollTop()<254){ // Высота шапки, на которой убирается фиксед $('#navBar').removeClass('fixed'); } }); }); </script> p.s. код для форума и дизайна http://pangorarp-forum.ru/ и как это поможет? у него не создан никакой класс fixed, то что он добавляется в коде - толку не придает, это не так работает Link to comment https://ipbmafia.ru/topic/17424-peremeshenie-navbar/?&do=findComment&comment=129049 Share on other sites Больше вариантов
20 мая, 20177 yr Author comment_129050 Мне поможет кто нибудь? (((((( Link to comment https://ipbmafia.ru/topic/17424-peremeshenie-navbar/?&do=findComment&comment=129050 Share on other sites Больше вариантов
20 мая, 20177 yr comment_129051 2 минуты назад, Elvis DeShulez сказал: Не помогло, так же как и было просто проматывается добавьте тот же код и 4 минуты назад, Elvis DeShulez сказал: Не помогло, так же как и было просто проматывается добавьте тот код выше что дал Axeland и в global.css вставьте div#navBar.ipsClearfix.fixed { position: fixed; padding: 0px; top: 0; left: 0; width: 100%; z-index: 5100; } Link to comment https://ipbmafia.ru/topic/17424-peremeshenie-navbar/?&do=findComment&comment=129051 Share on other sites Больше вариантов
20 мая, 20177 yr Author comment_129052 4 минуты назад, Envy сказал: добавьте тот же код и добавьте тот код выше что дал Axeland и в global.css вставьте div#navBar.ipsClearfix.fixed { position: fixed; padding: 0px; top: 0; left: 0; width: 100%; z-index: 5100; } Почти, только очень забагано получаеться. Можешь подсказать как настроить как на этом форуме http://forum.diamondrp.ru Link to comment https://ipbmafia.ru/topic/17424-peremeshenie-navbar/?&do=findComment&comment=129052 Share on other sites Больше вариантов
20 мая, 20177 yr comment_129053 Только что, Elvis DeShulez сказал: Почти, только очень забагано получаеться. Можешь подсказать как настроить как на этом форуме http://forum.diamondrp.ru все нормально работает на том форуме навбар во всю ширину, на твоем всего 2/3 Link to comment https://ipbmafia.ru/topic/17424-peremeshenie-navbar/?&do=findComment&comment=129053 Share on other sites Больше вариантов
20 мая, 20177 yr Author comment_129054 Только что, Envy сказал: все нормально работает на том форуме навбар во всю ширину, на твоем всего 2/3 можешь сделать так как там? Точнее подсказать как сделать?) Link to comment https://ipbmafia.ru/topic/17424-peremeshenie-navbar/?&do=findComment&comment=129054 Share on other sites Больше вариантов
20 мая, 20177 yr comment_129058 найти в globaltemplate <div class="ipsLayout_container ipsClearfix">...</div> и вынести за пределы этого дива <div id="navBar">...</div> + заменить то что я дал выше в global.css на div#navBar.ipsClearfix.fixed { position: fixed; padding: 0px; top: 0; left: 0; background: url(http://pangorarp-forum.ru/uploads/monthly_2017_05/591ecac4170fb_.png.d9627375e646b23e5c2bf0e6681799fd.png); width: 100%; z-index: 5100; } Link to comment https://ipbmafia.ru/topic/17424-peremeshenie-navbar/?&do=findComment&comment=129058 Share on other sites Больше вариантов
20 мая, 20177 yr Author comment_129061 13 минут назад, Envy сказал: найти в globaltemplate <div class="ipsLayout_container ipsClearfix">...</div> и вынести за пределы этого дива <div id="navBar">...</div> + заменить то что я дал выше в global.css на div#navBar.ipsClearfix.fixed { position: fixed; padding: 0px; top: 0; left: 0; background: url(http://pangorarp-forum.ru/uploads/monthly_2017_05/591ecac4170fb_.png.d9627375e646b23e5c2bf0e6681799fd.png); width: 100%; z-index: 5100; } Спойлер <div class='ipsLayout_container ipsClearfix'> <header id='header' class='ipsClearfix'>{{if theme.ipsf_fixedHeader}}<div class='ipsLayout_container forceWidth ipsClearfix'>{{endif}} {template="logo" app="core" group="global" params=""} {{if !in_array('ipsLayout_minimal', \IPS\Output::i()->bodyClasses )}}{template="userBar" app="core" group="global" params=""}{{endif}} {{if theme.ipsf_fixedHeader}}</div>{{endif}}</header> <div class='ipsClearfix'> {template="navBar" app="core" group="global" params=""} {template="searchBar" app="core" group="global" params=""} </div> </div> <div id='navBar'> </div> Вынести это типо сделать так? <div class='ipsLayout_container ipsClearfix'> <header id='header' class='ipsClearfix'>{{if theme.ipsf_fixedHeader}}<div class='ipsLayout_container forceWidth ipsClearfix'>{{endif}} {template="logo" app="core" group="global" params=""} {{if !in_array('ipsLayout_minimal', \IPS\Output::i()->bodyClasses )}}{template="userBar" app="core" group="global" params=""}{{endif}} {{if theme.ipsf_fixedHeader}}</div>{{endif}}</header> <div id='navBar' class='ipsClearfix'> {template="navBar" app="core" group="global" params=""} {template="searchBar" app="core" group="global" params=""} </div> </div> </div> Вот исходный без выноса: Link to comment https://ipbmafia.ru/topic/17424-peremeshenie-navbar/?&do=findComment&comment=129061 Share on other sites Больше вариантов
20 мая, 20177 yr comment_129062 <div class='ipsLayout_container ipsClearfix'> <header id='header' class='ipsClearfix'>{{if theme.ipsf_fixedHeader}}<div class='ipsLayout_container forceWidth ipsClearfix'>{{endif}} {template="logo" app="core" group="global" params=""} {{if !in_array('ipsLayout_minimal', \IPS\Output::i()->bodyClasses )}}{template="userBar" app="core" group="global" params=""}{{endif}} {{if theme.ipsf_fixedHeader}}</div>{{endif}}</header> </div> </div> <div id='navBar' class='ipsClearfix'> {template="navBar" app="core" group="global" params=""} {template="searchBar" app="core" group="global" params=""} </div> Link to comment https://ipbmafia.ru/topic/17424-peremeshenie-navbar/?&do=findComment&comment=129062 Share on other sites Больше вариантов
20 мая, 20177 yr comment_129063 Простите, я забыл добавить код из ксс)) #NavBar.fixed{ position: fixed; //фиксируем позицию top: 0; //сколько сверху от края экрана z-index: 4000; //чтобы не накладывался на меню и прочие штуки } В остальном @Envy прав, здесь уже ручками править. Link to comment https://ipbmafia.ru/topic/17424-peremeshenie-navbar/?&do=findComment&comment=129063 Share on other sites Больше вариантов
20 мая, 20177 yr comment_129064 1 минуту назад, Axeland сказал: Простите, я забыл добавить код из ксс)) #NavBar.fixed{ position: fixed; //фиксируем позицию top: 0; //сколько сверху от края экрана z-index: 4000; //чтобы не накладывался на меню и прочие штуки } В остальном @Envy прав, здесь уже ручками править. не нужно это добавлять, выше уже все добавлено Edited 20 мая, 20177 yr by Envy Link to comment https://ipbmafia.ru/topic/17424-peremeshenie-navbar/?&do=findComment&comment=129064 Share on other sites Больше вариантов
20 мая, 20177 yr comment_129065 Только что, Envy сказал: не нужно это добавлять, выше уже все добавлено Это к посту со скриптом, я действительно забыл. Полагаю, что логически можно дойти, что нужен код для фиксации, то что добавили выше - замечательно. Далее уже идет настройка под конкретный дизайн. Link to comment https://ipbmafia.ru/topic/17424-peremeshenie-navbar/?&do=findComment&comment=129065 Share on other sites Больше вариантов
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.