Das div wird geschlossen, wenn ich auf die Schaltfläche "Schließen" drücke. aber wenn ich weiter scrolle, erscheint das div wieder. Ich möchte nicht, dass es erscheint, wenn ich auf Schließen drücke und es wieder anfängt zu gleiten. Ich möchte nur, dass es erscheint, wenn ich erneut auf die Schaltfläche "Schließen" drücke. aber ich konnte nicht, egal was ich versuchte.
body {
left: 0;
padding: 0;
margin: 0;
top: 0;
}
.middlesection {
height: 500vh;
background-color: red;
width: 100%;
}
.rightsidestyle {
height: 200px;
width: 300px;
background-color: bisque;
right: 10px;
position: fixed;
bottom: 10px;
display: block;
}
.onclk {
position: fixed;
bottom: 11rem;
right: 17rem;
z-index: 9999;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<script src="js/custome.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<title>test HTML</title>
</head>
<body>
<div class="middlesection"></div>
<button class="onclk" onclick="myFunction()"><i class="fa-solid fa-xmark"></i></button>
<div class="rightsidestyle" id="rightside">
</div>
<script>
$(window).scroll(function() {
$('#rightside').stop(true, true).hide().fadeIn('slow');
});
function myFunction() {
var x = document.getElementById("rightside");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>Lösung des Problems
Entfernen Sie einfach dieses Skript, wenn Sie es nicht beim Scrollen anzeigen möchten.
$(window).scroll(function(){
$('#rightside').stop(true, true).hide().fadeIn('slow');
});
Keine Kommentare:
Kommentar veröffentlichen