0

我在使用 jquery 代码块时遇到了一些麻烦，该代码块根据其中包含的徽标的宽度设置菜单栏的高度。问题是该站点是一个响应式设计，因此徽标的宽度会根据窗口的宽度而有所不同......由于某种原因，此代码仅在您第一次加载页面时有效，但不会继续调整大小随着徽标随页面窗口调整大小时的菜单栏。任何帮助，将不胜感激; 这是代码：

$(document).ready(function(){
  var logoWidth = $('#logo').css('width'); //Get width of logo
  var newHeight = parseInt(logoWidth) * 0.34666667; //Calculate resultant height of menu-bar
  $("#grey-section").height(newHeight ); //Set new height of menu-bar
});
4

2 回答 2

1

你可以做

$(window).on('resize', function() {
    var logoWidth = $('#logo').css('width'); //Get width of logo
    var newHeight = parseInt(logoWidth) * 0.34666667; //Calculate resultant height of menu-bar
    $("#grey-section").height(newHeight ); //Set new height of menu-bar
});

编辑：您还必须保留当前代码，或将其替换为

$(function() {
  $(window).trigger('resize');
});

使其在页面加载时具有正确的高度

你可能只做css

#logo { width: 100%; height: auto }

假设你想保持纵横比

于 2013-04-18T01:33:47.993 回答
0 
function getscreenheight()
{
   var  myHeight = 0;
             if (typeof (window.innerWidth) == "number") {
                  myHeight = window.innerHeight;
                } else {
                  if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                      myHeight = document.documentElement.clientHeight;
                      } else {
                          if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                              myHeight = document.body.clientHeight;
                             }
                     }
               }
     return myHeight;  
}

function getscreenwidth()
{
 var myWidth = 0;
             if (typeof (window.innerWidth) == "number") {
                  myWidth = window.innerWidth;
                } else {
                  if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                      myWidth = document.documentElement.clientWidth;
                      } else {
                          if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                              myWidth = document.body.clientWidth;
                             }
                     }
               }

             return myWidth;
}

使用上面的代码获取窗口的高度和宽度，然后使用 jQuery 的 .resize() 来触发它。( http://api.jquery.com/resize/ )

所以你可以每次调整你的东西。

你的，伊万

于 2013-04-18T01:36:23.610 回答