我是如何在此頁面上滾動瀏覽的？

我正在建立一個單頁滾動網站，頂部有一個固定的導航欄。這也將成爲一個響應網站。這些列在折點處似乎堆得很好。但不知何故，我確定了頭後我打破了滾動功能。在屏幕下面有用戶可以看到的文本，所以應該出現一個滾動條。我甚至嘗試將主要內容放在響應式網格外的容器中，並將容器的高度設置爲2000像素，但我放棄了該想法，因爲它沒有效果。所以，希望有人能告訴我我破了什麼。我是如何在此頁面上滾動瀏覽的？

這裏的HTML：

<!DOCTYPE html> 
<html lang="en"> 


<head> 
<meta charset="utf-8" /> 
<title>Page Title Here</title> 


<link rel="stylesheet" type="text/css" href="simplegrid.css" > 
<link rel="stylesheet" type="text/css" href="style.css" > 
</head> 

<body> 

<! --- navigation --- > 

<div class="nav-cont"> 
    <div class="navigation"> 
       <div class="grid"> 
       <div class="col-4-12"> 
        <img src="sblogo.png"alt="logo" height="84" width="88"> 
       </div> 
       <div class="col-2-12"> 
        <a href="#">Home</a> 
       </div> 
       <div class="col-2-12"> 
        <a href="#">About</a> 
       </div> 
       <div class="col-2-12"> 
        <a href="#">Pricing</a> 
       </div> 
       <div class="col-2-12"> 
        <a href="#">Contact</a> 
       </div> 

    </div> 
</div>   

<! ---Main Content --- > 

<div class="intro"> 
    <div class="grid grid-pad"> 
    <div class="col-1-1"> 
     <h1>Big Heading</h1> 
     <h2>Sub Heading</h2> 
    </div> 
    </div> 
</div> 

<div class="about"> 
    <div class="grid grid-pad"> 
    <div class="col-1-1"> 
     <h1>Section Heading</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac lacus a dolor faucibus gravida. Pellentesque urna metus, varius consectetur sagittis eu, imperdiet nec neque. In dictum accumsan auctor. Maecenas non odio elit. Donec quis urna vitae nisi egestas porta. Aliquam erat volutpat. Sed elementum, nunc ut sollicitudin placerat, est enim molestie sem, eu tempor magna leo eu eros. In fringilla dolor quis lacinia lacinia. Suspendisse potenti. Pellentesque nec est placerat, molestie ante quis, sollicitudin magna. </p><br> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac lacus a dolor faucibus gravida. Pellentesque urna metus, varius consectetur sagittis eu, imperdiet nec neque. In dictum accumsan auctor. Maecenas non odio elit. Donec quis urna vitae nisi egestas porta. Aliquam erat volutpat. Sed elementum, nunc ut sollicitudin placerat, est enim molestie sem, eu tempor magna leo eu eros. In fringilla dolor quis lacinia lacinia. Suspendisse potenti. Pellentesque nec est placerat, molestie ante quis, sollicitudin magna. </p><br> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac lacus a dolor faucibus gravida. Pellentesque urna metus, varius consectetur sagittis eu, imperdiet nec neque. In dictum accumsan auctor. Maecenas non odio elit. Donec quis urna vitae nisi egestas porta. Aliquam erat volutpat. Sed elementum, nunc ut sollicitudin placerat, est enim molestie sem, eu tempor magna leo eu eros. In fringilla dolor quis lacinia lacinia. Suspendisse potenti. Pellentesque nec est placerat, molestie ante quis, sollicitudin magna. </p><br> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac lacus a dolor faucibus gravida. Pellentesque urna metus, varius consectetur sagittis eu, imperdiet nec neque. In dictum accumsan auctor. Maecenas non odio elit. Donec quis urna vitae nisi egestas porta. Aliquam erat volutpat. Sed elementum, nunc ut sollicitudin placerat, est enim molestie sem, eu tempor magna leo eu eros. In fringilla dolor quis lacinia lacinia. Suspendisse potenti. Pellentesque nec est placerat, molestie ante quis, sollicitudin magna. </p><br> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac lacus a dolor faucibus gravida. Pellentesque urna metus, varius consectetur sagittis eu, imperdiet nec neque. In dictum accumsan auctor. Maecenas non odio elit. Donec quis urna vitae nisi egestas porta. Aliquam erat volutpat. Sed elementum, nunc ut sollicitudin placerat, est enim molestie sem, eu tempor magna leo eu eros. In fringilla dolor quis lacinia lacinia. Suspendisse potenti. Pellentesque nec est placerat, molestie ante quis, sollicitudin magna. </p><br> 
    </div> 
    </div> 
</div> 

</body> 

</html>

這個樣式表提供電網：

/* 
    Simple Grid 
    Learn More - http://dallasbass.com/simple-grid-a-lightweight-responsive-css-grid/ 
    Project Page - http://thisisdallas.github.com/Simple-Grid/ 
    Author - Dallas Bass 
    Site - dallasbass.com 
*/ 

*, *:after, *:before { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

body { 
    margin: 0px; 
} 

[class*='col-'] { 
    float: left; 
    padding-right: 20px; /* column-space */ 
} 

.grid { 
    width: 100%; 
    max-width: 1140px; 
    min-width: 755px; 
    margin: 0 auto; 
    overflow: hidden; 
} 

.grid:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

.grid-pad { 
    padding-top: 20px; 
    padding-left: 20px; /* grid-space to left */ 
    padding-right: 0px; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-20px=0 */ 
} 

.push-right { 
    float: right; 
} 

/* Content Columns */ 

.col-1-1 { 
    width: 100%; 
} 
.col-2-3, .col-8-12 { 
    width: 66.66%; 
} 

.col-1-2, .col-6-12 { 
    width: 50%; 
} 

.col-1-3, .col-4-12 { 
    width: 33.33%; 
} 

.col-1-4, .col-3-12 { 
    width: 25%; 
} 

.col-1-5 { 
    width: 20%; 
} 

.col-1-6, .col-2-12 { 
    width: 16.667%; 
} 

.col-1-7 { 
    width: 14.28%; 
} 

.col-1-8 { 
    width: 12.5%; 
} 

.col-1-9 { 
    width: 11.1%; 
} 

.col-1-10 { 
    width: 10%; 
} 

.col-1-11 { 
    width: 9.09%; 
} 

.col-1-12 { 
    width: 8.33% 
} 

/* Layout Columns */ 

.col-11-12 { 
    width: 91.66% 
} 

.col-10-12 { 
    width: 83.333%; 
} 

.col-9-12 { 
    width: 75%; 
} 

.col-5-12 { 
    width: 41.66%; 
} 

.col-7-12 { 
    width: 58.33% 
} 



/* Pushing blocks */ 

.push-2-3, .push-8-12 { 
    margin-left: 66.66%; 
} 

.push-1-2, .push-6-12 { 
    margin-left: 50%; 
} 

.push-1-3, .push-4-12 { 
    margin-left: 33.33%; 
} 

.push-1-4, .push-3-12 { 
    margin-left: 25%; 
} 

.push-1-5 { 
    margin-left: 20%; 
} 

.push-1-6, .push-2-12 { 
    margin-left: 16.667%; 
} 

.push-1-7 { 
    margin-left: 14.28%; 
} 

.push-1-8 { 
    margin-left: 12.5%; 
} 

.push-1-9 { 
    margin-left: 11.1%; 
} 

.push-1-10 { 
    margin-left: 10%; 
} 

.push-1-11 { 
    margin-left: 9.09%; 
} 

.push-1-12 { 
    margin-left: 8.33% 
} 


@media handheld, only screen and (max-width: 767px) { 
    .grid { 
     width: 100%; 
     min-width: 0; 
     margin-left: 0px; 
     margin-right: 0px; 
     padding-left: 20px; /* grid-space to left */ 
     padding-right: 10px; /* grid-space to right: (grid-space-left - column-space) e.g. 20px-10px=10px */ 
    } 

    [class*='col-'] { 
     width: auto; 
     float: none; 
     margin-left: 0px; 
     margin-right: 0px; 
     margin-top: 10px; 
     margin-bottom: 10px; 
     padding-left: 0px; 
     padding-right: 10px; /* column-space */ 
    } 


    /* Mobile Layout */ 

    [class*='mobile-col-'] { 
     float: left; 
     margin-left: 0px; 
     margin-right: 0px; 
     margin-top: 0px; 
     margin-bottom: 10px; 
     padding-left: 0px; 
     padding-right: 10px; /* column-space */ 
     padding-bottom: 0px; 
    } 

    .mobile-col-1-1 { 
     width: 100%; 
    } 
    .mobile-col-2-3, .mobile-col-8-12 { 
     width: 66.66%; 
    } 

    .mobile-col-1-2, .mobile-col-6-12 { 
     width: 50%; 
    } 

    .mobile-col-1-3, .mobile-col-4-12 { 
     width: 33.33%; 
    } 

    .mobile-col-1-4, .mobile-col-3-12 { 
     width: 25%; 
    } 

    .mobile-col-1-5 { 
     width: 20%; 
    } 

    .mobile-col-1-6, .mobile-col-2-12 { 
     width: 16.667%; 
    } 

    .mobile-col-1-7 { 
     width: 14.28%; 
    } 

    .mobile-col-1-8 { 
     width: 12.5%; 
    } 

    .mobile-col-1-9 { 
     width: 11.1%; 
    } 

    .mobile-col-1-10 { 
     width: 10%; 
    } 

    .mobile-col-1-11 { 
     width: 9.09%; 
    } 

    .mobile-col-1-12 { 
     width: 8.33% 
    } 

    /* Layout Columns */ 

    .mobile-col-11-12 { 
     width: 91.66% 
    } 

    .mobile-col-10-12 { 
     width: 83.333%; 
    } 

    .mobile-col-9-12 { 
     width: 75%; 
    } 

    .mobile-col-5-12 { 
     width: 41.66%; 
    } 

    .mobile-col-7-12 { 
     width: 58.33% 
    } 

    .hide-on-mobile { 
     display: none !important; 
     width: 0; 
     height: 0; 
    }

，這是我的一切自定義樣式表：

body { 

} 

.nav-cont { 
    height: 90px; 
    width: 100%; 
position: fixed; 
    background-color: #fff; 
    z-index: 9; 
} 

.navigation { 

} 



.navigation .grid { 

} 

.navigation .grid .col-2-12 { 
    background-color: black; 
    background-image: linear-gradient(black, rgba(255, 255, 255, 0.3)); 
    border: 1px solid white; 
    text-align: center; 

} 

.navigation a { 
    text-decoration: none; 
    color: #F1F1F1; 
    font-size: 24px; 
    margin: 5px; 
    padding: 5px 10px; 
} 



.intro { 

} 

.about { 

} 

}

我敢肯定，這是我錯過的簡單東西，但我似乎無法找到它。

來源

2015-10-01 musicoder

當您將所有內容包裝在固定的div中時，其類別爲nav-cont，它已從文檔流中刪除。你想要做的只是修改你的標題圖像，然後添加一個間隔元素（另一個col-4-12），它取代文檔流中的位置。

相關的CSS我說：

.navigation .grid > *:first-child { 
    position: fixed; 
} 
.navigation .grid > *:first-child, .navigation .grid > .spacer { 
    height: 84px; 
}

和相關的HTML：

<div class="col-4-12"> 
    <img src="sblogo.png" alt="logo" height="84" width="88"> 
</div> 
<div class="col-4-12 spacer"> 
</div>

這裏是一個工作的jsfiddle（減少寬度，以獲得移動視圖）：https://jsfiddle.net/tfypuymg/1/

來源

2015-10-01 02:11:30

我看看你的去向。其實我試圖把整個標題放在一個固定的位置。到目前爲止，我嘗試完成這些工作已經打破了頁面的響應功能。具體來說，使標題掩蓋頁面的頂部。我希望導航在用戶滾動時保持原位，並且還要調整其大小以適應各種屏幕。如果我採取了錯誤的做法，我願意接受建議。 – musicoder

我是如何在此頁面上滾動瀏覽的？

回答

相關問題