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

Elvis DeShulez · May 20, 2017

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

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

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

Arhangel · May 20, 2017

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

Elvis DeShulez · May 20, 2017

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

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

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

Envy · May 20, 2017

ставь тему 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();

        });

    };


  
});

Elvis DeShulez · May 20, 2017

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

        });

    };


  
});

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

Envy · May 20, 2017

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

Elvis DeShulez · May 20, 2017

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

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

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

Envy · May 20, 2017

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

Elvis DeShulez · May 20, 2017

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

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

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

Envy · May 20, 2017

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

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

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

Elvis DeShulez · May 20, 2017

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

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

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

Axeland · May 20, 2017

Нужно, чтобы 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/

Elvis DeShulez · May 20, 2017

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/

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

Envy · May 20, 2017

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

Elvis DeShulez · May 20, 2017

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

Envy · May 20, 2017

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;

}

Elvis DeShulez · May 20, 2017

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

Envy · May 20, 2017

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

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

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

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

Elvis DeShulez · May 20, 2017

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

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

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

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

Envy · May 20, 2017

найти в 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;

}

Elvis DeShulez · May 20, 2017

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>

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

Envy · May 20, 2017

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

Axeland · May 20, 2017

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

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

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

Envy · May 20, 2017

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

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

Edited May 20, 2017 by Envy

Axeland · May 20, 2017

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

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

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

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

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

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members