单击链接后通过滚动闪烁Bootstrap navi

时间:2015-04-26 17:35:51

标签: javascript jquery html twitter-bootstrap

我有一个固定到顶部的导航。我有来自Bootstrap 3的这个导航。在我的页面上,我有几个链接,里面有一个svg图像。通过悬停在链接上,它开始上下移动。当我点击这些链接时,我的页面将平滑滚动到特定位置。但是当我在点击这些链接后尝试向下或向上滚动时,我的导航开始在chrome中闪烁。但是当我用鼠标点击页面上的任何地方时,它会停止闪烁。

可能是什么问题或如何在页面的任何位置模拟鼠标点击?

我试过了:

$('body').click();

但现在确实有效。

这是我的网站: http://mival.de/examples/mival/index.html

当你点击黑色箭头并在chrome中滚动页面后,navi开始闪烁。

JS Scroll

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(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();
        setTimeout(function() {
            $('#homeSection').click();
        }, 500);
    });

});

1 个答案:

答案 0 :(得分:0)

好的,找到了解决方案。刚刚在我的箭头中添加了以下内容:悬停类:

 -webkit-perspective: 1000;
 -webkit-backface-visibility: hidden;

不知道,它做了什么,但它有效!

P.S。:除此之外,我将translateY规则的度量从em改为px。