Перемещение NavBar

Posted 20 мая, 20177 yr

Доброго времени суток. Не могли бы вы подсказать как сделать что ты при проматывании форума NavBar оставался в верху, а не со скролом странички пропадал.

вот две картинки ДО промотки:

И после промотки:

Цитата

20 мая, 20177 yr

comment_129017

Как по мне наоборот хорошо что едет))

Цитата

20 мая, 20177 yr

Author

comment_129019

2 минуты назад, Arhangel сказал:

Как по мне наоборот хорошо что едет))

кому как, мне бы хотелесь что бы строка была всегда под рукой, что бы не перематывать постоянно форум)

Цитата

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();

        });

    };


  
});

Цитата

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();

        });

    };


  
});

В какой из них?!

Цитата

20 мая, 20177 yr

comment_129027

так у тебя уже стоит этот шаблон, ищи в настройках значит, на всех форумах где видел ips focus, везде навбар идет за пользователем, значит у тебя эта функция отключена по всей видимости

Цитата

20 мая, 20177 yr

Author

comment_129031

6 минут назад, Envy сказал:

так у тебя уже стоит этот шаблон, ищи в настройках значит, на всех форумах где видел ips focus, везде навбар идет за пользователем, значит у тебя эта функция отключена по всей видимости

Вот нашёл, так она вроде как и не отключена:

Цитата

20 мая, 20177 yr

comment_129032

если не работает - наверное отключена? настройки стиля здесь

Цитата

20 мая, 20177 yr

Author

comment_129033

5 минут назад, Envy сказал:

если не работает - наверное отключена? настройки стиля здесь

Эммм, и где там функция отвевающая за NavBar?

Цитата

20 мая, 20177 yr

comment_129035

Только что, Elvis DeShulez сказал:

Эммм, и где там функция отвевающая за NavBar?

я должен этим заниматься?

Цитата

20 мая, 20177 yr

Author

comment_129036

4 минуты назад, Envy сказал:

я должен этим заниматься?

Нет, но у меня касаемо NavBar там нечего нету, так я и спрашиваю и где та эта функция

Цитата

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/

Цитата

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/

Не помогло, так же как и было просто проматывается

Цитата

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, то что он добавляется в коде - толку не придает, это не так работает

Цитата

20 мая, 20177 yr

Author

comment_129050

Мне поможет кто нибудь? ((((((

Цитата

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;

}

Цитата

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

Цитата

20 мая, 20177 yr

comment_129053

Только что, Elvis DeShulez сказал:

Почти, только очень забагано получаеться. Можешь подсказать как настроить как на этом форуме http://forum.diamondrp.ru

все нормально работает

на том форуме навбар во всю ширину, на твоем всего 2/3

Цитата

20 мая, 20177 yr

Author

comment_129054

Только что, Envy сказал:

все нормально работает

на том форуме навбар во всю ширину, на твоем всего 2/3

можешь сделать так как там? Точнее подсказать как сделать?)

Цитата

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;

}

Цитата

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 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>

Вот исходный без выноса:

Цитата

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>

Цитата

20 мая, 20177 yr

comment_129063

Простите, я забыл добавить код из ксс))

#NavBar.fixed{
	    position: fixed; //фиксируем позицию
	    top: 0; //сколько сверху от края экрана
        z-index: 4000; //чтобы не накладывался на меню и прочие штуки
	}

В остальном @Envy прав, здесь уже ручками править.

Цитата

20 мая, 20177 yr

comment_129064

1 минуту назад, Axeland сказал:
Простите, я забыл добавить код из ксс))
#NavBar.fixed{
	    position: fixed; //фиксируем позицию
	    top: 0; //сколько сверху от края экрана
        z-index: 4000; //чтобы не накладывался на меню и прочие штуки
	}
В остальном @Envy прав, здесь уже ручками править.

не нужно это добавлять, выше уже все добавлено

Edited 20 мая, 20177 yr by Envy

Цитата

20 мая, 20177 yr

comment_129065

Только что, Envy сказал:

не нужно это добавлять, выше уже все добавлено

Это к посту со скриптом, я действительно забыл. Полагаю, что логически можно дойти, что нужен код для фиксации, то что добавили выше - замечательно.

Далее уже идет настройка под конкретный дизайн.

Цитата

Sign In

Перемещение NavBar

Featured Replies

Join the conversation

Последние посетители 0

Account

Navigation

Messages

Уведомления

Search