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

[Elvis DeShulez]

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

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

 

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

[Arhangel]

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

[Elvis DeShulez]

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

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

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

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

        });

    };


  
});

 

[Elvis DeShulez]

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]

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

[Elvis DeShulez]

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

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

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

[Envy]

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

[Elvis DeShulez]

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

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

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

[Envy]

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

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

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

[Elvis DeShulez]

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

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

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

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

[Elvis DeShulez]

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]

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]

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

[Envy]

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

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

 

добавьте тот же код и 

 

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

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

 

добавьте тот код выше что дал Axeland и в global.css вставьте 

div#navBar.ipsClearfix.fixed {

1. position: fixed;
2. padding: 0px;
3. top: 0;
4. left: 0;
5. width: 100%;
6. z-index: 5100;

}

[Elvis DeShulez]

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

добавьте тот же код и 

 

добавьте тот код выше что дал Axeland и в global.css вставьте 

div#navBar.ipsClearfix.fixed {

1. position: fixed;
2. padding: 0px;
3. top: 0;
4. left: 0;
5. width: 100%;
6. z-index: 5100;

}

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

[Envy]

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

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

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

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

[Elvis DeShulez]

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

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

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

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

[Envy]

найти в globaltemplate  <div class="ipsLayout_container ipsClearfix">...</div> и вынести за пределы этого дива <div id="navBar">...</div>

 

+ заменить то что я дал выше в global.css на

div#navBar.ipsClearfix.fixed {

1. position: fixed;
2. padding: 0px;
3. top: 0;
4. left: 0;
5. background: url(http://pangorarp-forum.ru/uploads/monthly_2017_05/591ecac4170fb_.png.d9627375e646b23e5c2bf0e6681799fd.png);
6. width: 100%;
7. z-index: 5100;

}

[Elvis DeShulez]

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

найти в globaltemplate  <div class="ipsLayout_container ipsClearfix">...</div> и вынести за пределы этого дива <div id="navBar">...</div>

 

+ заменить то что я дал выше в global.css на

div#navBar.ipsClearfix.fixed {

1. position: fixed;
2. padding: 0px;
3. top: 0;
4. left: 0;
5. background: url(http://pangorarp-forum.ru/uploads/monthly_2017_05/591ecac4170fb_.png.d9627375e646b23e5c2bf0e6681799fd.png);
6. width: 100%;
7. 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> 

 

 

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

[Envy]

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

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

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

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

[Envy]

1 минуту назад, Axeland сказал:

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

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

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

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

Изменено 20 мая, 2017 пользователем Envy

[Axeland]

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

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

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

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