Question

我目前正在我的投资组合网站上工作，如果没有固定标题，它看起来像这样：

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中使用它。我尝试使用以下代码实现此目的，但它没有用，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

这里的横幅真的搞砸了，文字没有看到，标题也没有居中。感谢您的任何帮助，谢谢！

Answer 1

<!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添加背景。希望你能得到这个想法。

Answer 2

＆＃13;

* {
    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%;
}

＆＃13;

<html>
<head>
	<title></title>
	<link href="style.css" type="text/css" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Raleway:200,400,600" rel="stylesheet">
</head>
<body>
	<div class="banner">
   		<div class ="nav">
        	<ul>
        	<!--push a logo down to <ul> section -->
        		<a class="logo" href="index.html"><img src="http://blackheatbuilders.ctow.review/wp-content/uploads/2017/02/example-logo.png" height="80px"></a>
            	<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>
    	</div>
	</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>

＆＃13;

如何制作与横幅相同背景的固定标题？

2 个答案: