Question

我只是拥有以下脚本，如果您在第9行照看$('html,body').animate({，您会看到scrollTop: target.offset().top - 95 }, 700); - 问题是，如何更改数字 95 （它在offset（）之后。顶部XX）当屏幕宽度低于1030px？

时

我尝试添加这行代码并玩它，但它不起作用 - 我不知道我做错了什么。 if (width <= 1030) {

这是脚本：

//Menu Scrolling To Sections//
    $(document).ready(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 - 95 }, 700);
    return false;
    }}});});

Answer 1

解决方案

您需要更改：

if (target.length) {
    $('html,body').animate({
    scrollTop: target.offset().top - 95 }, 700);

要：

if (target.length) {
    var topPadding= 0;
    if($(window).width() >= 1030)
        topPadding = 95;
    $('html,body').animate({
    scrollTop: target.offset().top - topPadding }, 700);

说明

var topPadding= 0; //Sets the default padding to 0 (for when the window is below 1300px)
if($(window).width() >= 1030) //Checks to see if the window width is wider than 1300px
    topPadding = 95; //If it is then set's padding to 95px as in your code above

注意：我已将95更改为topPadding（您设置scrollTop的位置）

根据屏幕宽度更改脚本中的图形

1 个答案:

解决方案

说明