Внутренние ссылки не работают, когда я меняю их цвет - PullRequest
Новая
       5

Внутренние ссылки не работают, когда я меняю их цвет

0 голосов
/ 21 октября 2018

Мне нужна твоя помощьУ меня странная ошибка в моем коде.

Проблема в том, что внутренние ссылки на «дом» и на «нижний колонтитул» не работают, тогда как остальные работают нормально.Но когда я удаляю цвет: #ffffff из .menu a в css, тогда все они работают.Я не понимаю, как я могу решить эту проблемуУ кого-нибудь есть идея?

html {
  scroll-behavior: smooth;
}

body{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/*menu fixe*/
.menu{
	position: fixed;
	left: 0;
	bottom:60vh;
	z-index: 10;
}

.menu ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.menu li{
	padding: 10px;
}

.menu a{
	text-decoration: none;
	text-transform: uppercase;
	padding: 10px;
	color: #ffffff;
}

.menu a:hover{
	background-color: black;
}

/*main content*/
.wrapper{
	width: 60%;
	margin: 0 auto;
}

/*header*/
.header{
	width: 100%;
	height: 100vh;
	top: 0;
	background-color: #D4726A;
	position: sticky;
	z-index: -1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

/*boxes-all*/
.box-container {
	height: 100vh;
	width: 100%;
}
.box-header{
	height: 40vh;
	width: 100vw;
	position: sticky;
	top: 1px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	background-color: lightblue;
}

.box-content{
	height: 60vh;
	width: 100%;
	text-align: center;
	background-color: grey;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

/*boxes-each*/

.box-header-first{
	background-color: #447684;
}
.box-content-first{
	background-color: #0F414F;
}

.box-header-second{
	background-color: #51A35F;
}
.box-content-second{
	background-color: #10621E;
}

.box-header-third{
	background-color: #67989A;
}
.box-content-third{
	background-color: #0D4A4D;
}

/*footer*/
.footer{
	height: 100vh;
	width: 100%;
	margin: 0;
	bottom:0;
	position: sticky;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	z-index: -2;
	background-color: #D4A06A;
}
<!DOCTYPE html>
<html lang="fr">
    <head>
    <!-- En-tête de la page -->
        <meta charset="utf-8" />
        <title>titre</title>
        <link rel="stylesheet" type="text/css" href="sticky.css">
    </head>

    <body>
   
    <div class="body">
 <!-- menu fixe -->
    <div class="menu">
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#boxone">box one</a></li>
                <li><a href="#boxtwo">box two</a></li>
                <li><a href="#boxthree">box three</a></li>
                <li><a href="#footer">footer</a></li>
            </ul> 
        </nav>
    </div>

 <!-- contenu -->
    <div class="container">
       
    <!-- main content -->
        <div class="sticky">

        <!-- header -->
            <div class="header" id="home">
                <div class="wrapper">
                    <p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p> 
                   </div> 
            </div>

        <!-- boxes -->
            <div class="box-container" id="boxone">
                <div class="box-header box-header-first">
                   <div class="wrapper">
                        <p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p> 
                   </div> 
                </div>
                <div class="box-content box-content-first">
                   <div class="wrapper">
                        <p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p> 
                   </div> 
                </div>
            </div>

            <div class="box-container" id="boxtwo"> 
                <div class="box-header box-header-second">
                    <div class="wrapper">
                        <p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p> 
                   </div> 
                </div>
                <div class="box-content box-content-second">
                   <div class="wrapper">
                        <p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p> 
                   </div> 
                </div>
            </div>

            <div class="box-container" id="boxthree">
                <div class="box-header box-header-third">
                    <div class="wrapper">
                        <p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p> 
                   </div> 
                </div> 
                <div class="box-content box-content-third">
                   <div class="wrapper">
                        <p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p> 
                   </div> 
                </div>
            </div>

        </div>

    <!-- footer -->
        <div class="footer" id="footer">
            <div class="wrapper">
                <p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p> 
            </div> 
        </div>

    </div>

    </div>

    </body>
</html>

Спасибо:)

1 Ответ

0 голосов
/ 21 октября 2018

Это очень простая проблема,

Удалите

top: 0;

свойство из вашего .header класса.

и:

bottom: 0;

свойство из вашего класса .footer.

или скопируйте и вставьте этот стиль вместо этоговашего .header syle 

/*header*/
.header{
    width: 100%;
    height: 100vh;
    background-color: #D4726A;
    position: sticky;
    z-index: -1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
...