Jump to content

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

Elvis DeShulez
Elvis DeShulez
in Invision Community 4 Support

Featured Replies

Posted

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

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

 

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

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

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

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

  • Цитата

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

        });

    };


  
});

     

  • Цитата
    • Author
    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();

        });

    };


  
});

     

    В какой из них?!focus.PNG

  • Цитата

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

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

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

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

  • Цитата

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

  • Цитата
    • Author
    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/

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

     

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

  • Цитата
    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;
    }
  • Цитата
    • Author
    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

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

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

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

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

  • Цитата
    • Author
    Только что, Envy сказал:

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

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

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

  • Цитата

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

    2017-05-20 15_28_08-Категории и разделы - Pangora Role Play.png

    2017-05-20 15_28_03-Steam.png

  • Цитата
    • Author
    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;
    }

    2017-05-20 15_28_08-Категории и разделы - Pangora Role Play.png

    2017-05-20 15_28_03-Steam.png

    Спойлер

     

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

     

     

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

  • Цитата

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

  • Цитата

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

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

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

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

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

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

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

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

    Edited by Envy

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

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

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

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

  • Цитата

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

    Guest
    Ответить в этой теме...
    Go to topic listing

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

    • No registered users viewing this page.