Keep div hidden until it does not go through a fixed height (neither nor =)

Question

Keep div hidden until it does not go through a fixed height (neither nor =)

Navigation

#1 by (1 votes)

1

With the following code my Div appears from 1000px but if I do it disappear passing the pointer over any height reappears as soon as the scroll advances 1px and what I want is for the div to ONLY reappear when the scroll passes for 1000px. Thanks.

$(window).scroll(function()  {
	var y = $(window).scrollTop();
    if (y = 500 )  {
      $(".topmenu").fadeIn();   // > 100px from top - show div
    }
});


$(document).ready(function(){
	
	$(".outmouseover").mouseenter(function(){
        $(".outmouseover").fadeOut(0);
		});

});

.youdiclass{position:fixed; display:none;width:100px; height:100px; background:red;}
#back{width:300px; height:500px;background:blue; margin:auto;}
.height600{}
.topmenu{
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 30px;
  background: rgba(255,246,0,1.00);
  z-index: 1;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topmenu outmouseover"></div>

<div id="back" style="background:green";>
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>

javascript jquery html

asked by Ivan Soler 16.03.2016 в 21:06

source

1 answer

TALEND UPDATE FILA Could not load file or assembly 'System.Web.Http, Version = 4.0.0.0, Culture = neutral, PublicKeyToken = 31bf3856ad364e35' or one of its dependencies.

score 1 · Accepted Answer

This is what I wanted to tell you to take as (pseudocode) because I do not know about jQuery

$(window).scroll(function()  {
	var y = $(window).scrollTop();


    if (y < 1000 ){
       variable = false;
    }

    if (y >= 1000 && variable == false){
      variable = true;

      $(".topmenu").fadeIn();   // > 100px from top - show div
    }

});

var variable = false;

$(document).ready(function(){
	
	$(".outmouseover").mouseenter(function(){
        $(".outmouseover").fadeOut(0);
		});

});

.youdiclass{position:fixed; display:none;width:100px; height:100px; background:red;}
#back{width:300px; height:500px;background:blue; margin:auto;}
.height600{}
.topmenu{
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 30px;
  background: rgba(255,246,0,1.00);
  z-index: 1;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topmenu outmouseover"></div>

<div id="back" style="background:green";>
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>

Note: If you use exactly y == 1000 and the scroll is 1001 the condition is not met, then it will not show, if that is what you want just put y == 1000 && variable == false .

Thanks, it works partially because I pretend that when I go up y = 1000 (when passing through 1000) the div reappears. Can you help me with that?

I think this can help you in what you are looking for:

var variable = false;
var s        = 1000;

$(window).scroll(function()  {
	  
      var y = $(window).scrollTop();

      if (y >= s && variable == false){

         variable = true;
         $(".topmenu").fadeIn();   // > 100px from top - show div

      }else if (y < s && variable == true){

         variable = false;
         $(".topmenu").fadeIn();   // > 100px from top - show div

     }

});

$(document).ready(function(){
	
	$(".outmouseover").mouseenter(function(){
        $(".outmouseover").fadeOut(0);
		});

});

.youdiclass{position:fixed; display:none;width:100px; height:100px; background:red;}
#back{width:300px; height:500px;background:blue; margin:auto;}
.height600{}
.topmenu{
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 30px;
  background: rgba(255,246,0,1.00);
  z-index: 1;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topmenu outmouseover"></div>

<div id="back" style="background:green";>
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>
<div id="back">
</div>
<div id="back" style="background:green";>
</div>

Note: You may want to refactor it, but you can take it as a base.