Jump to content

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


 Share

Recommended Posts

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

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

 

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

ставь тему 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
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

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

2017-05-20 14_22_54-Стили и шаблоны.png

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

Нужно, чтобы 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
Share on other sites

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
Share on other sites

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
Share on other sites

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;
}
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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> 

 

 

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

Link to comment
Share on other sites

<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
Share on other sites

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

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

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

Link to comment
Share on other sites

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

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

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

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

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

Edited by Envy
Link to comment
Share on other sites

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

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

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

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

Link to comment
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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Ваша ссылка была автоматически строена.   Отображать как обычную ссылку

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...