jquery scoll page hide div and stop scroll page show div and close, open button-CodePudding

The div closes when I press the close button. but when I keep scrolling the div appears again. I don't want it to appear when I press close and it starts to slide again. I just want it to appear when I press the close button again. but I couldn't, no matter what I tried.

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 ></div>
  <button  onclick="myFunction()"><i ></i></button>
  <div  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>

CodePudding user response：

Just remove this script if you don't want to show it on scroll.

$(window).scroll(function(){
    $('#rightside').stop(true, true).hide().fadeIn('slow');
});

CodePudding user response：

i did it by myself !!!!! thanks

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;
}

.openclk{
    position: fixed;
    bottom: 55px;
    right: 0;
    z-index: 9999;
    height: 100px;
    display: none;
}

<!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 ></div>
     
     <button  id="openclick"><i ></i></button>
    <div >
     <div  id="rightside">
        <button  id="clickbutton"><i ></i></button>  

    </div>
</div>

    <script>
$(window).scroll(function(){

        $("#rightside").stop(true, true).hide().fadeIn('slow');                


    
    });

    $('#clickbutton').click(function (){
        $('.onclk').css('display', 'none');  
        ($('.sagtaraf').hide('slow'));
        $('.openclk').css('display', 'block').show('slow');  
    
    });

    $('#openclick').click(function (){
        $('.openclk').css('display', 'none');  
        ($('.sagtaraf').show('slow'));
        $('.onclk').css('display', 'block').show('slow');
    
    });



    </script>
</body>
</html>