-3

所以我不是编码员，但我需要将一个固定的<nav>.

我尝试left:auto right:aut在我的 css 中添加 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;
}

Javascript 添加 .nav-fixed

    $('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 回答
1

如今，您可以在 CSS 中完美地居中内容，而无需编写客户端脚本。

如果您只想将较大容器内的内容水平居中，您可以简单地将以下规则应用于内容元素：

margin: 0 auto;

请注意，上面会将顶部和底部边距设置为零，但最重要的效果当然是它使浏览器计算左右边距相等并在两者之间划分可用的边距空间，实际上使元素居中（http ://www.w3.org/TR/CSS21/visudet.html#blockwidth）。

如果您还想垂直居中内容，您可以使用 CSS 表格呈现功能：

<div style="display: table">
    <div style="display: table-cell; vertical-align: middle">
        <div style="margin: 0 auto">Nunc mollis volutpat tincidunt. Nunc ultrices feugiat ipsum, vulputate pellentesque urna pharetra at. Duis auctor, mauris a molestie blandit, felis enim tempus mauris, nec elementum dolor felis vel purus. Morbi vel tellus et velit tempus semper in eget nunc. Integer quis lacus justo. Pellentesque adipiscing, elit id lobortis ultricies, ante diam vulputate arcu, a egestas mauris diam quis metus. Maecenas iaculis urna a nulla iaculis a faucibus eros imperdiet. Maecenas ipsum libero, placerat a consectetur sit amet, mattis vel nisi. Donec laoreet porttitor pulvinar.</div>
    </div>
</div>

以上是一个建议-我将其剥离到工作所需的最低限度。如果您只是将其粘贴到一个空文档中，您可能看不到想要的效果，因为您需要设置容器的宽度和高度（HTML 页面默认情况下height: auto，这意味着它尽可能小以适合其内容），也许也是最里面元素的宽度和/或高度。

外部元素 - 具有的元素 -display: table不一定是 a div- 例如，它可以是body元素。你需要有display: table一个外部元素，否则display: table-cell在后代元素中不起作用。该display: table-cell规则允许在vertical-align: middle这里产生预期的效果 - 将最里面的元素（带有 的元素margin: auto）垂直放置在中间。最后，margin: auto与之前的效果相同 - 最里面的元素也水平定位在中间。

根据您的布局，您可能需要根据自己的喜好指定宽度和/或高度，但以上是一个功能强大且非常灵活的模板，适用于已知和未知尺寸的元素，作为所谓的“动态”或“浮动”布局。

于 2013-05-28T10:41:28.170 回答