如何製作與banner相同背景的固定標題？

我目前正在對我的投資組合的網站，並沒有固定的頭，它看起來是這樣的：如何製作與banner相同背景的固定標題？

HTML：

<div class="banner"> 
<header class="container"> 
    <a class="logo" href="index.html"><img src="images/logo.png"></a> 

    <nav> 
     <ul> 
      <li><a href="index.html">HOME</a></li> 
      <li><a href="#about">ABOUT ME</a></li> 
      <li><a href="#portfolio">PORTFOLIO</a></li> 
      <li><a href="#photography">PHOTOGRAPHY</a></li> 
      <li><a href="#contact">CONTACT</a></li> 
     </ul> 
    </nav> 
</header> 
<div class="heading container"> 
    <h1 class="wow animated bounceInDown">SAKIR INTESER</h1> 
    <h4 class="wow animated bounceInUp">FRONT-END WEB DEVELOPER</h4> 
</div> <!-- heading -->

CSS：

header{ 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    } 

nav{ 
    font-size: 1.1em; 
    position: relative; 
    top: 5%; 
} 

nav ul li{ 
    margin-right: 10px; 
} 

.logo{ 
    margin-top: 1%; 
    margin-left: 2%; 
} 

/**************banner************/ 

.banner { 
    height: 100%; 
    background-image: url(../images/banner.jpg); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: 60% 0%; 
}

現在我想讓它成爲一個固定的/粘性的標題，這會造成一些麻煩。基本上，我希望標題的功能是這樣的：http://codepen.io/benthom21/full/GNqwXd/ 向下滾動以查看我在說什麼，請注意標題在標題圖像內，但是在引導程序中，並且我希望以純HTML格式，CSS和jQuery。我試着用下面的代碼來實現這一點，但它did'nt工作，HTML的部分是，

<div class="banner"> 
<header class="container"> 
    <a class="logo" href="index.html"><img src="images/logo.png"></a> 

    <nav> 
     <ul> 
      <li><a href="index.html">HOME</a></li> 
      <li><a href="#about">ABOUT ME</a></li> 
      <li><a href="#portfolio">PORTFOLIO</a></li> 
      <li><a href="#photography">PHOTOGRAPHY</a></li> 
      <li><a href="#contact">CONTACT</a></li> 
     </ul> 
    </nav> 
</header> 
<div class="heading container"> 
    <h1 class="wow animated bounceInDown">SAKIR INTESER</h1> 
    <h4 class="wow animated bounceInUp">FRONT-END WEB DEVELOPER</h4> 
</div> <!-- heading -->

的CSS是：

header{ 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    position: fixed; 
    width: 100%; 
    margin: 0 auto; 
    top: 0; 
    height: 80px; 
    background-color: pink; 
} 
nav{ 
    font-size: 1.1em; 
    position: relative; 
    top: 5%; 
} 

nav ul li{ 
    margin-right: 10px; 
} 

.logo{ 
    margin-top: 1%; 
    margin-left: 2%; 
} 

/**************banner************/ 

.banner { 
    height: 100%; 
    background-image: url(../images/banner.jpg); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: 60% 0%; 
}

and it looks like this

的橫幅真的搞砸了，文字看不見，標題也不居中。任何形式的幫助表示感謝，謝謝！

來源

2017-03-04 Sakir Inteser

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 
<style type="text/css"> 
body{ 
    margin:0; 
    padding:0; 
} 
p{ 
    height: 1024px; 
} 
header{ 
    margin:0; 
    color:#fff; 
    padding:20px; 
    text-transform: uppercase; 
    position: fixed; 
    height: 40px; 
    width: 100%; 
    background-color:rgba(0, 0, 0, 0.0); 
} 
.add-background{ 
    background-color:rgba(22, 0, 22, 0.5); 
} 
.banner img { 
    width:100%; 
} 
    </style> 
</head> 
<body> 
<header class="header"> 
You can place anything in this header content. In your case it is the place for menu. 
</header> 
<div class="banner"><img src="https://placehold.it/800x300"></div> 
<p> 
Add more content here so that you can sroll the page 
</p> 
</body> 
<script type="text/javascript"> 
    $(document).ready(function($) { 
    $(window).scroll(function() { 
    var scrollPos = $(window).scrollTop(), 
     header = $('.header'); 

    if (scrollPos > 40) { 
     header.addClass('add-background'); 
    } else { 
     header.removeClass('add-background'); 
    } 
    }); 
}); 
</script> 
</html>

我做了一個簡單的頁面，向您展示jQuery代碼的示例，它可以在用戶滾動頁面時動態更改標題的類。使用CSS代碼使背景從默認狀態變爲透明。然後使用jquery添加背景。希望你會明白。

來源

2017-03-04 14:52:52 RKJ

太感謝你了！它工作完美！ –

不客氣，不要忘記上投票，如果這是最好的答案... – RKJ

我會但我的名聲還不到15，所以我不能upvote它。抱歉! –

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-model: border-box; 
 
    color: #FFF; 
 
    text-align: center; 
 
    } 
 

 
.nav{ 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 80px; 
 
    background-color: #000; 
 
    z-index: 1 
 
} 
 

 
.nav li { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    height: 100px;  
 
    line-height: 80px;  
 
    padding: 0 20px; 
 
    margin: 0px auto; 
 
    float: right; 
 
    
 
    } 
 
    .nav li a { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    height: 80px;  
 
    line-height: 80px; 
 
    text-decoration: none; 
 
    } 
 

 
.logo { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: auto; 
 
    height: 80px; 
 
    float: left; 
 
} 
 

 
/**************banner************/ 
 

 
.banner { 
 
    height: 1200px; 
 
    width: 100%; 
 
    background: rgb(100, 100, 100); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: 60% 0%; 
 
}

<html> 
 
<head> 
 
\t <title></title> 
 
\t <link href="style.css" type="text/css" rel="stylesheet"> 
 
\t <link href="https://fonts.googleapis.com/css?family=Raleway:200,400,600" rel="stylesheet"> 
 
</head> 
 
<body> 
 
\t <div class="banner"> 
 
    \t \t <div class ="nav"> 
 
     \t <ul> 
 
     \t <!--push a logo down to <ul> section --> 
 
     \t \t <a class="logo" href="index.html"><img src="http://blackheatbuilders.ctow.review/wp-content/uploads/2017/02/example-logo.png" height="80px"></a> 
 
      \t <li><a href="index.html">HOME</a></li> 
 
      \t <li><a href="#about">ABOUT ME</a></li> 
 
      \t <li><a href="#portfolio">PORTFOLIO</a></li> 
 
      \t <li><a href="#photography">PHOTOGRAPHY</a></li> 
 
      \t <li><a href="#contact">CONTACT</a></li> 
 
     \t </ul> 
 
    \t </div> 
 
\t </div> 
 
<div class="heading container"> 
 
    <h1 class="wow animated bounceInDown">SAKIR INTESER</h1> 
 
    <h4 class="wow animated bounceInUp">FRONT-END WEB DEVELOPER</h4> 
 
</div> 
 
</body> 
 
</html>

來源

2017-03-04 15:30:28

如何製作與banner相同背景的固定標題？

回答

相關問題