Question

我正在使用CSS技巧中的“Smooth scroll”在我的单页（bootstrap 3）网站上导航。我也使用Fancy box来显示我的投资组合项目。

现在所有工作都很精细，直到我尝试使用div中的数据附加fancybox中显示的数据（其中包含投资组合项目内容）

我认为这是冲突的，因为Jquery（Smoothscroll和Fancybox）都使用锚标签。

这是smoothscroll脚本：

<script type="text/javascript">
    $(function() {
        $('a[href*=#]:not([href=#])').click(function() {
            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top
                    }, 500);
                    return false;
                }
            }
        });
    });
</script>

这是fancybox脚本，用于加载fancybox并使用类触发它，以及从单独的div获取内容的脚本。

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
</script>


<!--FANCYBOX DISPLAY CONTENT FROM DIV -->
<script type="text/javascript">
    $(".fancybox").fancybox({
        openEffect  : 'none',
        closeEffect : 'none',
        afterLoad   : function() {
            this.inner.prepend( '<h1>1. My custom title</h1>' );
            this.content = '<h1>2. My custom title</h1>' + this.content.html();
        }
    });
</script>

当我注释掉smoothscroll脚本时，fancybox工作正常。所以它必须是smoothscroll。

关于如何解决这个问题的任何想法？

您可以在此处看到fancybox工作的网站，因此禁用了smoothscroll： http://www.baasdesign.nl/responsive/

Answer 1

这个类，例如'fancy-content'，你在加载fancybox链接之前隐藏了花哨的内容，不要使它成为“display：none”，如下例所示：

/* element bifore load */ .fancy-content{ display: block; /*not none*/ height: 0px; overflow: hidden; visibility: hidden; } /*  element after load in fancybox inner */ .fancybox-inner .fancy-content{ height: auto; overflow: hidden; visibility: visible;}

其中一个原因是，滚动内容不知道滚动内容的宽度和高度，因为元素显示为none。 :-)我希望这有帮助！

平滑滚动与Fancybox“附加自定义内容”冲突

1 个答案: