【问题标题】:Jquery hide Div with anchor text when bottom page section is reached到达底部页面部分时,Jquery 用锚文本隐藏 Div
【发布时间】:2016-07-29 12:56:13
【问题描述】:

我有一个自动滚动功能,有一个静态箭头可以让用户滚动到页面的下一部分。当用户到达“联系人”部分(最后一页)时,我希望隐藏箭头,因为没有其他页面可以向下滚动。

更新 -

目前导航箭头在最后一页消失了,但它也在 about 和 intro 部分也消失了。我该如何解决

Jquery - 更新 v3

$(function() {

$('a.page-scroll').bind('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1500, 'easeInOutExpo');


    event.preventDefault();


    });


 });


function nextSection()
{

var scrollPos = $(document).scrollTop();
$('#section-navigator a').each(function () {
    var currLink = $(this);
    var refElement = $(currLink.attr("href"));

    if (refElement.position().top > scrollPos) {
               var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1500, 'easeInOutExpo');

    event.preventDefault();
        location.hash = "";
        location.hash = currLink.attr("href"); 

        if ($($anchor.attr('href')).attr('id') == "contact") {
$("div.page-scroll").hide();
  }

        return false;


       }


     });
 }

HTML

<div class="page-scroll">
    <img class="arrow-down page-scroll-btn" src="img/arrow_dark.png" onclick="nextSection()" />
</div>

谢谢!

【问题讨论】:

  • 您是否在控制台上打印了 $($anchor.attr('href')) 值以检查执行是否进入了 'if' 块?如果是,那么 $($anchor.attr('href')) 的价值是多少?去做。因为很可能,您的执行没有进入“if”块并执行“else”块。在else块内添加console.log("else block")之类的语句,看是进入if块还是else块。
  • 你应该在括号内使用if的条件,比如if($($anchor.attr('href')) == "contact")
  • mm 如果我放 - if($($anchor.attr('href')) == "contact") { $("a.page-scroll").hide() ;它仍然不起作用......我应该把它放在下一个函数还是第一个函数中
  • 这是因为$anchor什么都没有,因为它在nextSection()之外
  • 你能做一个工作演示给我们看吗? jsfiddle.net 是这样做的好地方。

标签: javascript jquery html css


【解决方案1】:

从外观上看,您使用链接作为下一个选择器的 id,因此您应该在 if 中使用 #contact

另外,你在错误的地方关闭了 if 括号 )

if ($anchor.attr('href') == "#contact") {
}

如果要将其与目标 div id 进行比较,则需要执行以下操作:

if ($($anchor.attr('href')).attr('id') == "contact") {
    $("div.page-scroll").hide();
}

但这似乎需要额外的处理才能获得相同的结果

更新

鉴于您所做的所有编辑 - 它们都没有真正有用,因为它们不会创建 MCVE - 我们似乎离最初的问题越来越远。我会做以下事情:

当您在 html 中手动绑定时,摆脱 jQuery 顶部的那个 jquery onclick 绑定函数,将下一节​​函数更改为:

function nextSection() {

  var currentPos = $(document).scrollTop();

  $('#section-navigator a').each(function() {
    var currLinkHash = $(this).attr("href");
    var refElement = $(currLinkHash);

    if (refElement.offset().top > scrollPos) { // change this to offset

      $('html, body').stop().animate({
        scrollTop: refElement.offset().top    // just use refElement
      }, 1500, 'easeInOutExpo');

      location.hash = "";
      location.hash = currLinkHash;

      if (refElement.attr('id') == "contact") {  // hide the scroller if the id is contact
        $("div.page-scroll").hide();   
      }

      return false;
    }
  });
}

【讨论】:

  • @user1673498 抱歉,请参阅编辑,只是注意到您有一个额外的$
  • 你的页面滚动是一个 div - 不是一个锚点!
  • 我明白了...但是 If 语句将在第一个函数下而不是下一节函数下,对吗?
  • 好的,现在它隐藏了箭头,但在所有地方。我将再次更新代码。感谢皮特的帮助
  • 对不起,没有minimal reproducible example,我真的不知道你做错了什么。首先,尽管我根本看不到顶部函数中的要点,因为您正在将单击(或不是事实证明)绑定到包含已经具有单击甚至绑定到它的元素的东西
猜你喜欢
  • 1970-01-01
  • 2018-10-02
  • 1970-01-01
  • 2011-02-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多