javascript获取浏览器的宽度和元素的宽度 [英] javascript getting width of browser and width of element

问题描述

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

我尝试添加 left：auto right：aut 在我的CSS中它没有用。所以基本上我想在javascript中做这个并且取屏幕宽度减去< nav> 的宽度除以2并设置左边或右边的内容。

但是我的javascript很糟糕，我基本上不知道自己在做什么。所以，如果有人可以帮助我使用javascript，或者可能在没有javascript的情况下进行修复。

HTML

 < nav class =row container double pad-right pad-left> 
< ul class =pull-left> 
< a href =./>主页< / a> 
< a>主菜单< / a> 
< a>论坛< / a> 
< a href =./ video>视频< / a> 
< / ul> 
< ul class =pull-right> 
< a>登入< / a> 
< a>注册< / a> 
< / ul> 
< / nav> 
  

当屏幕达到一定高度时通过javascript添加的CSS。

  .nav-fixed {
 position：fixed！important; 
 top：0！important; 
 float：none！important; 
宽度：100％; 
背景颜色：＃161616; 
身高：33px; 
 z-index：9000; 
} 
  

Javascript添加.nav-fixed

  $（'document'）。ready（function（）{
 $（window）.scroll（function（）{
 if（$（ （'nav'）; 
 
}其他{
 $（'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

FIX from HADI：

  function fix_top_bar（）{
 var barWidth = $（'。nav-fixed' ）.width（）; 
 $（'。nav-fixed'）。css（{左：'50％，‘利润率左’：‘ - ’+（barWidth / 2 + 20）+‘像素’}）; 
} 
 
 $（'document'）。ready（function（）{
 $（window）.scroll（function（）{
 if（$（' （'nav'）; 
 fix_top_bar（）; 
} else（'body'）。 {
 $（'。nav-fixed'）.css（{'left'：''，'margin-left'：''}）; 
 $（'nav'）。removeClass（' （）; 
} 
}）; 
 
 fix_top_bar（）; 
 $（window）.resize（function（）{
 fix_top_bar （）; 
}）; 
}）; 
  

解决方案

请使用 -

  $（window）.width（）; 
  

而不是 $（窗口）.width（function（））;

更新

看到这个 - http://jsfiddle.net/ngGzX/3/

So I am not a coder but I need to center a fixed <nav>.

I tried adding left:auto right:auto in my css it didnt work. So basically I wanted to do it in javascript and take the width of screen minus the width of the <nav> divide by 2 and set what left or right is.

But my javascript is bad and I basically don't know what I am doing. So if someone could help me out in the javascript or might have a fix without 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>

CSS that is added through javascript when screen reaches a certain height.

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

Javascript adding .nav-fixed

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

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

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

Javascript of the screenwidth - 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');
 };

images of what is happening currently http://imgur.com/4lkZmDG http://imgur.com/DXAl3mS

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

解决方案

please use -

$(window).width();

instead of $(window).width(function());

Update

see this - http://jsfiddle.net/ngGzX/3/

这篇关于javascript获取浏览器的宽度和元素的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！