-3

だから私はコーダーではありませんが、固定を中央に配置する必要があり<nav>ます。

left:auto right:autcss に o を追加しようとしましたが、うまくいきませんでした。だから基本的に私はjavascriptでそれをやりたかったし、画面の幅から<nav>2で割った幅を引いて、左または右が何であるかを設定したかった.

しかし、私のjavascriptは悪く、基本的に自分が何をしているのかわかりません。したがって、誰かが JavaScript で私を助けてくれたり、JavaScript なしで修正したりすることができれば。

HTML

<nav class="row container double pad-right pad-left">
 <ul class="pull-left">
  <a href="./">Home</a>
  <a>Main Menu</a>
  <a>Forums</a>
  <a href="./video">Video</a>
 </ul>
 <ul class="pull-right">
  <a>Sign in</a>
  <a>Register</a>
 </ul>
</nav>

画面が特定の高さに達したときに JavaScript を介して追加される CSS。

.nav-fixed{
  position:fixed !important;
  top:0 !important;
  float:none !important; 
  width:100%;
  background-color:#161616;
  height:33px;
  z-index:9000;
}

.nav-fixed を追加する Javascript

    $('document').ready(function() {
    $(window).scroll(function() {
        if ($(window).scrollTop() > 112) {

            $('nav').addClass('nav-fixed');

            }else{
            $('nav').removeClass('nav-fixed');
        }
    })});

画面幅の Javascript - elementwidth

$('document').ready(function() {
  $(window).width(function() {
    var window_width = $(window).width();
    var curr_width = $('nav').width();
    var center = (window_width-curr_width)/2
    if (window_width > cur_width){
      $('nav').css('right', $center, 'left', $center );
    }else if(window_width <= curr_width){
      $('nav').css('right', '0px', 'left', '0px');
 };

現在起こっていることの画像 http://imgur.com/4lkZmDG http://imgur.com/DXAl3mS

HADI からの修正:

    function fix_top_bar(){
        var barWidth = $('.nav-fixed').width();
        $('.nav-fixed').css({ 'left' : '50%', 'margin-left' : '-' + (barWidth/2 + 20) + 'px' });
    }

    $('document').ready(function() {
            $(window).scroll(function() {
                if ($('body').scrollTop() > 112) {

                    $('nav').addClass('nav-fixed');
                    fix_top_bar();                              
                    }else{
                    $('.nav-fixed').css({ 'left' : '', 'margin-left' : ''});
                    $('nav').removeClass('nav-fixed');
                }
            });

        fix_top_bar();
        $(window).resize(function(){
              fix_top_bar();  
        });
        });
4

2 に答える 2

1

使ってください -

$(window).width();

それ以外の$(window).width(function());

アップデート

これを参照してください - http://jsfiddle.net/ngGzX/3/

于 2013-05-28T10:07:13.357 に答える