Question

所以我有一个模态窗口导致页面向下滚动。它将#login-box添加到url，但div id不是设置的地方。我想在html中添加一个div，但这不起作用，因为我的菜单是粘性的，它会导致它们滚动到div所在的任何地方。

http://onecraftyshop.com并点击导航菜单中的“登录”。你会看到我在说什么。然后向下滚动并再次单击它，无论您在页面上的哪个位置，oyu都会看到它向下滚动。

以下是模态窗口的相关JS：

// Load the modal window
$('a.login-window').click(function() {

    // Get the value in the href of our button.
    var login_id = $(this).attr('href');

    // Add our overlay to the body and fade it in.
    $('body').append('<div id="overlay"></div>');
    $('#overlay').fadeIn(300);

    // Fade in the modal window.
    $(login_id).fadeIn(300);

    // center our modal window with the browsers.
    var margin_left = ($(login_id).width() + 24) / 2;
    var margin_top = ($(login_id).height() + 24) / 2;

    $(login_id).css({
        'margin-left' : -margin_left,
        'margin-top' : -margin_top
    });

    return false;
});

我尝试过更改

var margin_top = ($(login_id).height() + 24) / 2;到

var margin_top = ($(login_id).height() + 24) / .7;并且停止了滚动，但是盒子没有居中（它实际上是在页面顶部被切断了）然后我想“很容易用css改变定位”，但那时候导致它再次开始滚动！

访问http://onecraftyshop.com，然后点击导航菜单中的“登录”。弹出模态窗口，页面将滚动。 CSS通过firebug或开发工具在chrome中。

如果您还有其他需要，请告诉我。

感谢您帮助我解决这个问题！

------------请求#overlay的CSS --------------------------

background: none repeat scroll 0 0 #000000;
height: 100%;
left: 0;
opacity: 0.8;
position: fixed;
top: 0;
width: 100%;
z-index: 9999999;

Answer 1

要停止在页面上滚动，请创建此javascript函数（用简单的javascript编写）：

scrollingToggleIterates = 0;
function toggleScrolling(event){
    if(scrollingToggleIterates%2 == 0){
        var scrollPosition = document.documentElement.scrollTop;
        document.body.className = 'stopScrolling';
        document.documentElement.scrollTop = scrollPosition;
    }
    else{
        var scrollPosition = document.documentElement.scrollTop;
        document.body.className = '';
        document.documentElement.scrollTop = scrollPosition;
    }
    scrollingToggleIterates++;
}

然后将此类添加到您的css：

.stopScrolling{
  height: 100%;
  overflow:hidden;
}

如果要阻止滚动，请调用toggleScrolling函数，然后在想要重新启动时再次调用该函数。我知道你在使用JQuery，但你应该能够将其与普通的JS混合使用。

Answer 2

在片段链接上向下滚动窗口的插件导致了此问题。如果取消隐藏登录菜单，则可以看到窗口向下滚动到其原始位置。由于这不是默认的浏览器行为，return false或event.preventDefault()不会停止此行为。您需要查看是否有一个类可以添加到此链接，这将阻止插件在单击此链接时滚动。

另一个选择是不使用href属性作为登录窗口的id。设为href="javascript:void(0)"或href="#"。然后使用数据属性，例如：data-target="loginMenu"并更新您的javascript以从此属性中获取ID：

var login_id = $(this).attr('data-target');

Jquery模式弹出导致页面滚动

2 个答案: