-1
私は学校のプロジェクトのためにウェブサイトを作らなければなりませんでしたが、問題があります。私のナビゲーションバーには、リンクをクリックするとメニューがドロップされますので、バーが上に触れるとスティッキーになりますが、スクロールするとメニューが短くなりにくくなります。このhttps://gyazo.com/4549278923f72e383f8fbbda0ddb0a2dに見ることができます。メニューは私のウェブサイトに完全に表示されません。
#navbar {
padding-bottom: 0px;
padding-top: 0px;
overflow:hidden;
width:1080px;
background-color:rgb(235,0,0);
font-family: "montserrat";
padding-left: 470px;
height: 70px;
margin-left: -8px;
}
.text{
color:white;
padding-left:50px;
float:left
}
.mySlides {display:none;}
.middle{
margin: -10;
padding-top: 0.5%;
}
.menu {
float: left;
overflow: visible;
padding-top: 25px;
font-family: montserrat;
font-size: 16px;
}
.menu2 .button {
cursor: pointer;
padding-left: 60px;
font-size: 16px;
font-family: montserrat;
border: none;
outline: none;
color: white;
background-color: inherit;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow:rgb(100,0,0);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
overflow: visible;
}
.show {
display: block;
overflow: visible;
}
.sticky{
top:0;
position: fixed;
padding-top:60px;
width: 100%;
}
</style>
</head>
<body onscroll="stickyBar()">
<div id="homejump">
<img src="Logomakr_9xaA4u.png" alt="Logo" style="width:28%; height:25%; padding-left:35%; padding-right:35%; overflow: hidden;">
</div>
<div id="navbar"><div class="menu">
<a href="#homejump" style="color: white;text-decoration: none;">Home</a></div>
<div class="menu"><div class="menu2">
<button class="button" onclick="mental()">Mental Health
</button>
<div class="dropdown-content" id="myDropdown">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a></div></div></div>
<div class="menu"><div class="menu2">
<button class="button" onclick="physical()">Physical Health
</button>
<div class="dropdown-content" id="myDropdown1">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a></div></div></div>
<div class="menu"><div class="menu2">
<button class="button" onclick="rehab()">Rehab
</button>
<div class="dropdown-content" id="myDropdown2">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a></div></div></div>
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 7000);
}
function mental() {
document.getElementById("myDropdown").classList.toggle("show");
}
function physical() {
document.getElementById("myDropdown1").classList.toggle("show");
}
function rehab() {
document.getElementById("myDropdown2").classList.toggle("show");
}
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function stickyBar() {
if (window.pageYOffset >= sticky)
{navbar.classList.add("sticky");}
else {navbar.classList.remove("sticky");}
}
</script>
これは、バーをスティッキーにするだけでなく、メニューのすべてのコードです。どのようにしてこの問題を解決できますか？
：#navbar – Trueman
固定はありがとうございました。私はそれが何か小さいことを知っていましたが、それを見つけ出すにはあまりにも無駄です。 –
問題はありません、歓迎します:)私はこの答えを正しいものとしてマークしてください – Trueman