Question

我有一个隐藏在向下滚动的元素，当我向上滚动时会显示回来。我试图创建一个场景，一旦div被隐藏，它可以重新出现在链接点击而不管滚动位置。

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 180) {
    $('.header-avail')
	.attr('style', 'display: block !important;')
	.fadeIn();
  } else {
    $('.header-avail').fadeOut();
  }
});

body {height: 2000px;}

#primary-menu {
    letter-spacing: 1px;
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: 250px;
 
}
#primary-menu > li {
    display: inline-block;
    margin: 0 1.154em;
    position: relative;
    background: red;
    height: 300px;
    float: right;
 
}

.show-contact{background: green !important;}

.header-avail{display:none !important;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<ul id="primary-menu" class="menu nav-menu" aria-expanded="false">

<li id="menu-item-386" class="header-avail menu-item menu-item-type-post_type menu-item-object-page menu-item-386"><a href="#" class="menu-image-title-after"><span class="menu-image-title">Contact Us</span></a></li>
<li id="menu-item-504" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-504" style="display: inline-block !important;"><a href="#" class="menu-image-title-after"><span class="menu-image-title">Check Availability</span></a></li>

<li id="menu-item-504" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-504 show-contact" style="display: inline-block !important;"><a href="#" class="menu-image-title-after"><span class="menu-image-title">Show Contact Us</span></a></li>
</ul>

Answer 1

我会设置一个标志来查看元素何时被单击，然后将其合并到滚动逻辑中，如下所示：

＆＃13;

var show_flag = false;
$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 180 || show_flag) {
    $('.header-avail')
	.attr('style', 'display: block !important;')
	.fadeIn();
  } else {
    $('.header-avail').fadeOut();
  }
});

$('.show-contact').click(function(e){
	e.preventDefault();
  $('.header-avail').attr('style', 'display: block !important;');
  show_flag = true;
})

＆＃13;

body {height: 2000px;}

#primary-menu {
    letter-spacing: 1px;
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: 250px;
 
}
#primary-menu > li {
    display: inline-block;
    margin: 0 1.154em;
    position: relative;
    background: red;
    height: 300px;
    float: right;
 
}

.show-contact{background: green !important;}

.header-avail{display:none !important;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="primary-menu" class="menu nav-menu" aria-expanded="false">

<li id="menu-item-386" class="header-avail menu-item menu-item-type-post_type menu-item-object-page menu-item-386"><a href="#" class="menu-image-title-after"><span class="menu-image-title">Contact Us</span></a></li>
<li id="menu-item-504" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-504" style="display: inline-block !important;"><a href="#" class="menu-image-title-after"><span class="menu-image-title">Check Availability</span></a></li>

<li id="menu-item-504" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-504 show-contact" style="display: inline-block !important;"><a href="#" class="menu-image-title-after"><span class="menu-image-title">Show Contact Us</span></a></li>
</ul>

＆＃13;

Answer 2

＆＃13;

$('.header-avail').css('display','none')
$('.show-contact').on("click", function(){
$('.header-avail').fadeIn();
 })
$(document).scroll(function() {
  var y = $(this).scrollTop();
  
  if (y > 180) {  
  
    $('.header-avail').fadeIn();
  } else {
    $('.header-avail').fadeOut();
  }
});

＆＃13;

body {height: 2000px;}

#primary-menu {
    letter-spacing: 1px;
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: 150px;
 
}
#primary-menu > li {
    display: inline-block;
    margin: 0 1.154em;
    position: relative;
    background: red;
    height: 300px;
    float: right;
 
}

.show-contact{background: green !important;}

.header-avail{display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="primary-menu" class="menu nav-menu" aria-expanded="false">

<li id="menu-item-386" class="header-avail menu-item menu-item-type-post_type menu-item-object-page menu-item-386"><a href="#" class="menu-image-title-after"><span class="menu-image-title">Contact Us</span></a></li>
<li id="menu-item-504" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-504" style="display: inline-block !important;"><a href="#" class="menu-image-title-after"><span class="menu-image-title">Check Availability</span></a></li>

<li id="menu-item-504" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-504 show-contact" style="display: inline-block !important;"><a href="#" class="menu-image-title-after"><span class="menu-image-title">Show Contact Us</span></a></li>
</ul>

＆＃13;

此？

<强> FIDDLE

显示单击并隐藏在滚动上的元素

2 个答案: