Question

所以我不是编码员，但我需要固定<nav>。

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

screenwidth的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的FIX：

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

Answer 1

请使用 -

$(window).width();

而不是$(window).width(function());

更新

请参阅此内容 - http://jsfiddle.net/ngGzX/3/

Answer 2

如今，您可以很好地将内容集中在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的元素 - 不必是div - 例如，它可以是body元素。您需要在外部元素上使用display: table，否则后代元素中的display: table-cell不起作用。 display: table-cell规则允许vertical-align: middle在此处具有预期效果 - 将最内层元素（具有margin: auto的元素）垂直放置在中间。最后，margin: auto具有与以前相同的效果 - 最里面的元素也水平放置在中间。

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

javascript获取浏览器的宽度和元素的宽度

2 个答案:

更新