Question

我有以下div，类为“fullscreen”

<div class="fullscreen">
</div>

在该div中，有一个按钮，一旦点击，它将向下滚动到ID为“#page”的另一个div。

问题是，如果滚动到“fullscreen”并安顿下来，如何使用“#page”类永久隐藏div？在网站再次访问之前，它不会再次显示，即使已离开页面并返回该网站。

请在此处找到实时示例，因为它会澄清所有内容：http://loaistudio.com/anita/

按钮的HTML代码： <a href="#header">Find Out How</a>

JS：

//Smooth Scroll
   $('a').click(function(){
      $('html, body').animate({
         scrollTop: $( $(this).attr('href') ).offset().top
      }, 1500);
      return false;
   });

Answer 1

由于您提到了“即使离开页面并返回页面”的要求，您也需要一种存储状态的方法。

有几个选择：

会话
饼干
本地存储（可能不适用于旧版浏览器）

选择：）

在这种情况下，我可能会使用会话存储

Answer 2

最终更新 我已经概述了如何使用cookies，localStorage或服务器端会话存储值。这就是我用你发布的代码实现这些解决方案的方法：

 //Smooth Scroll
    $('a').click(function(){
        $('html, body').animate({
            scrollTop: $( $(this).attr('href') ).offset().top
        }, 1500);
        /* We have animated, lets set the variable to never do this again */
        if(supports_storage()) localStorage['nofullscreen'] = true;
        return false;
    });

上面，我们将localStorage变量（我将其命名为'nofullscreen'，随意替换为对你有意义的变量）设置为true，因此我们知道用户已经看过我们的全屏。现在，当页面加载时，我们想要检查变量，并采取相应的行动：

 $( document ).ready(function() {
     if(localStorage['nofullscreen'] == 'true') $('.fullscreen').hide();
 });

如果存储变量存在且为“true”，则应该在页面加载时使用“全屏”类隐藏div。

您需要在用户计算机上存储Cookie，以便知道他们过去曾访问过。你可以用基本的Javascript来实现，如下所示：

document.cookie="nofullscreen=true";

上面的行将在本地存储中创建一个cookie，一旦你滚动到#page就运行它。

function doFullscreen(){
    var name = "nofullscreen=";
    var cookies = document.cookies.split(';');
    cookies.forEach(function(n){
        var c = cookies[i].trim();
        if(c.indexOf(name)==0) return c.substring(name.length,c.length);
    }
    return false;
    });

上面的函数可以在页面加载时运行，如果用户以前在这里，它将返回True，你应该向右转到#page，如果是新用户则返回false，你应该显示全屏div。

更新：其他人建议使用localStorage，这也是一个好主意。这是一个小例子。

检查兼容性：

function supports_storage(){
    try{
        return 'localStorage' in window && window['localStorage'] !== null;
    } catch (e) {
        return false;
    }
}

写入存储：

if(supports_storage()) localStorage['sitename.nofullscreen'] = true;

检查存储空间：

 if(localStorage['sitename.nofullscreen'] == "true"){
      //go right to #page
 }

更新＃2：PHP会话存储 您在评论中已经解释过您使用PHP也是如此。我觉得上述任何一种解决方案都可以正常工作，但我会在这里添加一些PHP代码以保证完整性。

首先，您需要开始会话：

 <?php session_start() ?>

您现在可以使用PHP写入会话：

 <?php $_SESSION['nofullscreen']='true'; ?>

并检查会话变量是否稍后设置为：

 <?php if($_SESSION['nofullscreen'] == 'true') { //print css rules to hide #fullscreen here? } ?>

如果您需要清除会话变量，可以使用unset：

 <?php unset($_SESSION['nofullscreen']) ?>

希望这有帮助！

永久隐藏div直到下次访问

2 个答案: