全寬問題第2部分

我好像在頁面的右側有一些過度的水平滾動。全寬問題第2部分

我已經推斷它是與我的網站頂部的腳本有關 - 當我刪除它時，問題自行解決。

只是想給你一個我希望實現的想法;我想要頂部的圖像跨越瀏覽器的100％寬度，但保持類型居中。

當你第一次訪問該網站時，你會很清楚我在說什麼。

http://cargocollective.com/btatest

在此先感謝

邁克爾

編輯

代碼如下：

<script type="text/javascript"> 
     // The social div 
    var $socialDiv, 
     // The social div's height 
     socialDivHeight = 560, 
     currentSocialDivHeight = socialDivHeight; 


    $(document).ready(function() { 
     $socialDiv = $('.social'); 
     $socialDiv.css({ 
      'background-image': 'url(http://a3.sphotos.ak.fbcdn.net/hphotos-ak-prn1/563655_324264884301748_471368753_n.jpg)', 
      'background-repeat': 'no-repeat', 
      'background-attachment': 'fixed', 
      'background-size' : '110% auto', 
      'height' : socialDivHeight + 'px', 
      'margin-left' : '-100%', 
      'margin-right' : '-100%', 


     }); 
    }); 


    $(window).scroll(function() { 
     //Get scroll position of window 
     var windowScroll = $(this).scrollTop(); 

     var newSocialDivHeight = Math.max(0, socialDivHeight - windowScroll); 

     if (Math.abs(newSocialDivHeight - currentSocialDivHeight) < 1) 
      return; 

     $socialDiv.css({ 
      'opacity' : 1 - windowScroll/400 
     }); 

     currentSocialDivHeight = newSocialDivHeight; 
    }); 
</script>

來源

2012-08-01 Michael

嘿，現在你可以改變你的代碼，如果是的話，請創建一個jsfiddle鏈接，並把你的HTML和CSS代碼....... – 2012-08-01 09:39:04

請把你的代碼你試過了嗎？ – Vins 2012-08-01 09:39:19

耶，jsfiddle會幫助...很難讓我看到是什麼原因造成的。雖然你可以嘗試'html，body {width：100％}' – neokio 2012-08-01 09:41:28

的<div class="social" style="background-image: …;">導致ŧ他滾動條。

您正在有效地創建一個寬度爲2160像素（包括邊距）的元素，並想知道爲什麼您有水平滾動條？

您有：

.project_content { width: 720px; } 
.social { 
    /* implied with = 100%, since this is a block element */ 
    margin-left: -100%; /* add 720px on the left */ 
    margin-right: -100%; /* add 720px on the right */ 
}

但是你的目標是讓.social 100％的寬度。爲了達到這個目的，您可以重新排列您的HTML結構，或者通過將position: relative;或position: absolute;賦值給它來使該元素脫離「正常」流程。

來源

2012-08-01 09:59:45 feeela

對不起，我不確定你的意思。當談到Jquery時，我正在經歷一個小白咒。 – Michael 2012-08-01 10:23:49

@ user1522319我的答案中沒有一行jQuery;只是普通的CSS是你的問題... – feeela 2012-08-01 10:56:12

當我向CSS添加一個'.social {position：relative;}'時，仍然存在滾動問題，'絕對'會徹底刪除'.social'。 – Michael 2012-08-01 11:14:11

全寬問題第2部分

回答

相關問題