Одностраничные проблемы с прокруткой

Question

Я использую бесплатную тему Wordpress (я знаю, что является частью проблемы :). Это одностраничная тема прокрутки с липким заголовком. Проблема в том, что ссылки не попадают в верхнюю часть разделов - они прокручиваются мимо. Я использовал CSS для увеличения размера заголовка. Если это так сильно отбрасывает, как я могу исправить это в кодировке?

сайт: http://whatsahead.com/closuremediatest/ (в работах)

любопытной часть это даже не согласуется о том, где он приземляется на этом участке. Что может быть причиной этого?

CSS Я редактировал:

`.navbar-collapse { 
    border-top: 1px solid transparent; 
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset; 
    overflow-x: visible; 
    margin-left: 155px !important; 
    padding-right: 15px; 
    padding-left: 15px; 
    background: #000; 
     margin-bottom: 30px !important; 
    margin-left: 195px !important; 
    margin-top: 50px; 
    max-height: 65px; 
} 

#navigation .navbar-nav { 
    float: left; 
} 

#navigation .navbar-nav > li > a { 
    font-family: "aleolight"; 
    font-size: 20px; 
    font-weight: normal; 
    padding-bottom: 30px; 
    padding-top: 20px; 
} 

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { 
    background-color: none !important; 
    color: #b4d333 !important; 
} 

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { 
    background-color: none; 
    color: #b4d333 !important; 
} 

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { 
    background-color: transparent !important; 
} 

.navbar-default .navbar-nav > li > a { 
    color: #fff; 
} 

.navbar-default .navbar-nav > li > a:before { 
    background-color: transparent; 
    background-image: url("http://whatsahead.com/closuremediatest/wp-content/uploads/2015/01/arrow-down.png"); 
    background-position: 40% 40%; 
    background-repeat: no-repeat; 
    content: ""; 
    display: block; 
    height: 11px; 
    left: 0px; 
    position: absolute; 
    margin-top: 8px; 
    width: 18px; 
} 

#masthead.sticky #navigation .navbar-nav > li > a { 
    padding: 17px 25px; 
}` 

Javacript scrollto:

;(function (define) { 
    'use strict'; 
    define(['jquery'], function ($) { 

     var $scrollTo = $.scrollTo = function(target, duration, settings) { 
      return $(window).scrollTo(target, duration, settings); 
     }; 

     $scrollTo.defaults = { 
      axis:'xy', 
      duration: 0, 
      limit:true 
     }; 

     // Returns the element that needs to be animated to scroll the window. 
     // Kept for backwards compatibility (specially for localScroll & serialScroll) 
     $scrollTo.window = function(scope) { 
      return $(window)._scrollable(); 
     }; 

     // Hack, hack, hack :) 
     // Returns the real elements to scroll (supports window/iframes, documents and regular nodes) 
     $.fn._scrollable = function() { 
      return this.map(function() { 
       var elem = this, 
        isWin = !elem.nodeName || $.inArray(elem.nodeName.toLowerCase(),  
    ['iframe','#document','html','body']) != -1; 

        if (!isWin) 
         return elem; 

       var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem; 

       return /webkit/i.test(navigator.userAgent) || doc.compatMode == 'BackCompat' ? 
        doc.body : 
        doc.documentElement; 
      }); 
     }; 

     $.fn.scrollTo = function(target, duration, settings) { 
      if (typeof duration == 'object') { 
       settings = duration; 
       duration = 0; 
      } 
      if (typeof settings == 'function') 
       settings = { onAfter:settings }; 

      if (target == 'max') 
       target = 9e9; 

      settings = $.extend({}, $scrollTo.defaults, settings); 
      // Speed is still recognized for backwards compatibility 
      duration = duration || settings.duration; 
      // Make sure the settings are given right 
      settings.queue = settings.queue && settings.axis.length > 1; 

      if (settings.queue) 
       // Let's keep the overall duration 
       duration /= 2; 
      settings.offset = both(settings.offset); 
      settings.over = both(settings.over); 

      return this._scrollable().each(function() { 
       // Null target yields nothing, just like jQuery does 
       if (target == null) return; 

       var elem = this, 
        $elem = $(elem), 
        targ = target, toff, attr = {}, 
        win = $elem.is('html,body'); 

       switch (typeof targ) { 
        // A number will pass the regex 
        case 'number': 
        case 'string': 
         if (/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)) { 
          targ = both(targ); 
          // We are done 
          break; 
         } 
         // Relative/Absolute selector, no break! 
         targ = win ? $(targ) : $(targ, this); 
         if (!targ.length) return; 
        case 'object': 
         // DOMElement/jQuery 
         if (targ.is || targ.style) 
          // Get the real position of the target 
          toff = (targ = $(targ)).offset(); 
       } 

       var offset = $.isFunction(settings.offset) && settings.offset(elem, targ) || 
    settings.offset; 

       $.each(settings.axis.split(''), function(i, axis) { 
        var Pos = axis == 'x' ? 'Left' : 'Top', 
         pos = Pos.toLowerCase(), 
         key = 'scroll' + Pos, 
         old = elem[key], 
         max = $scrollTo.max(elem, axis); 

        if (toff) {// jQuery/DOMElement 
         attr[key] = toff[pos] + (win ? 0 : old - $elem.offset()[pos]); 

         // If it's a dom element, reduce the margin 
         if (settings.margin) { 
          attr[key] -= parseInt(targ.css('margin'+Pos)) || 0; 
          attr[key] -= parseInt(targ.css('border'+Pos+'Width')) || 0; 
         } 

         attr[key] += offset[pos] || 0; 

         if(settings.over[pos]) 
          // Scroll to a fraction of its width/height 
          attr[key] += targ[axis=='x'?'width':'height']() * settings.over[pos]; 
        } else { 
         var val = targ[pos]; 
         // Handle percentage values 
         attr[key] = val.slice && val.slice(-1) == '%' ? 
          parseFloat(val)/100 * max 
          : val; 
        } 

        // Number or 'number' 
        if (settings.limit && /^\d+$/.test(attr[key])) 
         // Check the limits 
         attr[key] = attr[key] <= 0 ? 0 : Math.min(attr[key], max); 

        // Queueing axes 
        if (!i && settings.queue) { 
         // Don't waste time animating, if there's no need. 
         if (old != attr[key]) 
          // Intermediate animation 
          animate(settings.onAfterFirst); 
         // Don't animate this axis again in the next iteration. 
         delete attr[key]; 
        } 
       }); 

       animate(settings.onAfter); 

       function animate(callback) { 
        $elem.animate(attr, duration, settings.easing, callback && function() { 
         callback.call(this, targ, settings); 
        }); 
       } 
      }).end(); 
     }; 

     // Max scrolling position, works on quirks mode 
     // It only fails (not too badly) on IE, quirks mode. 
     $scrollTo.max = function(elem, axis) { 
      var Dim = axis == 'x' ? 'Width' : 'Height', 
       scroll = 'scroll'+Dim; 

      if (!$(elem).is('html,body')) 
       return elem[scroll] - $(elem)[Dim.toLowerCase()](); 

      var size = 'client' + Dim, 
       html = elem.ownerDocument.documentElement, 
       body = elem.ownerDocument.body; 

      return Math.max(html[scroll], body[scroll]) - Math.min(html[size] , body[size] ); 
     }; 

     function both(val) { 
      return $.isFunction(val) || $.isPlainObject(val) ? val : { top:val, left:val }; 
     } 

     // AMD requirement 
     return $scrollTo; 
    }) 
    }(typeof define === 'function' && define.amd ? define : function (deps, factory) { 
    if (typeof module !== 'undefined' && module.exports) { 
     // Node 
     module.exports = factory(require('jquery')); 
    } else { 
     factory(jQuery); 
    } 
    })); 

Javascript smoothscroll:

function ssc_init() { 
    if (!document.body) return; 
    var e = document.body; 
    var t = document.documentElement; 
    var n = window.innerHeight; 
    var r = e.scrollHeight; 
    ssc_root = document.compatMode.indexOf("CSS") >= 0 ? t : e; 
    ssc_activeElement = e; 
    ssc_initdone = true; 
    if (top != self) { 
    ssc_frame = true 
    } else if (r > n && (e.offsetHeight <= n || t.offsetHeight <= n)) { 
    ssc_root.style.height = "auto"; 
    if (ssc_root.offsetHeight <= n) { 
     var i = document.createElement("div"); 
     i.style.clear = "both"; 
     e.appendChild(i) 
    } 
    } 
    if (!ssc_fixedback) { 
    e.style.backgroundAttachment = "scroll"; 
    t.style.backgroundAttachment = "scroll" 
    } 
    if (ssc_keyboardsupport) { 
    ssc_addEvent("keydown", ssc_keydown) 
    } 
} 

function ssc_scrollArray(e, t, n, r) { 
    r || (r = 1e3); 
    ssc_directionCheck(t, n); 
    ssc_que.push({ 
    x: t, 
    y: n, 
    lastX: t < 0 ? .99 : -.99, 
    lastY: n < 0 ? .99 : -.99, 
    start: +(new Date) 
    }); 
    if (ssc_pending) { 
    return 
    } 
    var i = function() { 
    var s = +(new Date); 
    var o = 0; 
    var u = 0; 
    for (var a = 0; a < ssc_que.length; a++) { 
     var f = ssc_que[a]; 
     var l = s - f.start; 
     var c = l >= ssc_animtime; 
     var h = c ? 1 : l/ssc_animtime; 
     if (ssc_pulseAlgorithm) { 
     h = ssc_pulse(h) 
     } 
     var p = f.x * h - f.lastX >> 0; 
     var d = f.y * h - f.lastY >> 0; 
     o += p; 
     u += d; 
     f.lastX += p; 
     f.lastY += d; 
     if (c) { 
     ssc_que.splice(a, 1); 
     a-- 
     } 
    } 
    if (t) { 
     var v = e.scrollLeft; 
     e.scrollLeft += o; 
     if (o && e.scrollLeft === v) { 
     t = 0 
     } 
    } 
    if (n) { 
     var m = e.scrollTop; 
     e.scrollTop += u; 
     if (u && e.scrollTop === m) { 
     n = 0 
     } 
    } 
    if (!t && !n) { 
     ssc_que = [] 
    } 
    if (ssc_que.length) { 
     setTimeout(i, r/ssc_framerate + 1) 
    } else { 
     ssc_pending = false 
    } 
    }; 
    setTimeout(i, 0); 
    ssc_pending = true 
} 

function ssc_wheel(e) { 
    if (!ssc_initdone) { 
    ssc_init() 
    } 
    var t = e.target; 
    var n = ssc_overflowingAncestor(t); 
    if (!n || e.defaultPrevented || ssc_isNodeName(ssc_activeElement, "embed") || ssc_isNodeName(t, "embed") && /\.pdf/i.test(t.src)) { 
    return true 
    } 
    var r = e.wheelDeltaX || 0; 
    var i = e.wheelDeltaY || 0; 
    if (!r && !i) { 
    i = e.wheelDelta || 0 
    } 
    if (Math.abs(r) > 1.2) { 
    r *= ssc_stepsize/120 
    } 
    if (Math.abs(i) > 1.2) { 
    i *= ssc_stepsize/120 
    } 
    ssc_scrollArray(n, -r, -i); 
    e.preventDefault() 
} 

function ssc_keydown(e) { 
    var t = e.target; 
    var n = e.ctrlKey || e.altKey || e.metaKey; 
    if (/input|textarea|embed/i.test(t.nodeName) || t.isContentEditable || e.defaultPrevented || n) { 
    return true 
    } 
    if (ssc_isNodeName(t, "button") && e.keyCode === ssc_key.spacebar) { 
    return true 
    } 
    var r, i = 0, 
     s = 0; 
    var o = ssc_overflowingAncestor(ssc_activeElement); 
    var u = o.clientHeight; 
    if (o == document.body) { 
    u = window.innerHeight 
    } 
    switch (e.keyCode) { 
    case ssc_key.up: 
    s = -ssc_arrowscroll; 
    break; 
    case ssc_key.down: 
    s = ssc_arrowscroll; 
    break; 
    case ssc_key.spacebar: 
    r = e.shiftKey ? 1 : -1; 
    s = -r * u * .9; 
    break; 
    case ssc_key.pageup: 
    s = -u * .9; 
    break; 
    case ssc_key.pagedown: 
    s = u * .9; 
    break; 
    case ssc_key.home: 
    s = -o.scrollTop; 
    break; 
    case ssc_key.end: 
    var a = o.scrollHeight - o.scrollTop - u; 
    s = a > 0 ? a + 10 : 0; 
    break; 
    case ssc_key.left: 
    i = -ssc_arrowscroll; 
    break; 
    case ssc_key.right: 
    i = ssc_arrowscroll; 
    break; 
    default: 
    return true 
    } 
    ssc_scrollArray(o, i, s); 
    e.preventDefault() 
} 

function ssc_mousedown(e) { 
    ssc_activeElement = e.target 
} 

function ssc_setCache(e, t) { 
    for (var n = e.length; n--;) ssc_cache[ssc_uniqueID(e[n])] = t; 
    return t 
} 

function ssc_overflowingAncestor(e) { 
    var t = []; 
    var n = ssc_root.scrollHeight; 
    do { 
    var r = ssc_cache[ssc_uniqueID(e)]; 
    if (r) { 
     return ssc_setCache(t, r) 
    } 
    t.push(e); 
    if (n === e.scrollHeight) { 
     if (!ssc_frame || ssc_root.clientHeight + 10 < n) { 
     return ssc_setCache(t, document.body) 
     } 
    } else if (e.clientHeight + 10 < e.scrollHeight) { 
     overflow = getComputedStyle(e, "").getPropertyValue("overflow"); 
     if (overflow === "scroll" || overflow === "auto") { 
     return ssc_setCache(t, e) 
     } 
    } 
    } while (e = e.parentNode) 
} 

function ssc_addEvent(e, t, n) { 
    window.addEventListener(e, t, n || false) 
} 

function ssc_removeEvent(e, t, n) { 
    window.removeEventListener(e, t, n || false) 
} 

function ssc_isNodeName(e, t) { 
    return e.nodeName.toLowerCase() === t.toLowerCase() 
} 

function ssc_directionCheck(e, t) { 
    e = e > 0 ? 1 : -1; 
    t = t > 0 ? 1 : -1; 
    if (ssc_direction.x !== e || ssc_direction.y !== t) { 
    ssc_direction.x = e; 
    ssc_direction.y = t; 
    ssc_que = [] 
    } 
} 

function ssc_pulse_(e) { 
    var t, n, r; 
    e = e * ssc_pulseScale; 
    if (e < 1) { 
    t = e - (1 - Math.exp(-e)) 
    } else { 
    n = Math.exp(-1); 
    e -= 1; 
    r = 1 - Math.exp(-e); 
    t = n + r * (1 - n) 
    } 
    return t * ssc_pulseNormalize 
} 

function ssc_pulse(e) { 
    if (e >= 1) return 1; 
    if (e <= 0) return 0; 
    if (ssc_pulseNormalize == 1) { 
    ssc_pulseNormalize /= ssc_pulse_(1) 
    } 
    return ssc_pulse_(e) 
} 

var ssc_framerate = 150; 
var ssc_animtime = 500; 
var ssc_stepsize = 150; 
var ssc_pulseAlgorithm = true; 
var ssc_pulseScale = 6; 
var ssc_pulseNormalize = 1; 
var ssc_keyboardsupport = true; 
var ssc_arrowscroll = 50; 
var ssc_frame = false; 
var ssc_direction = { 
    x: 0, 
    y: 0 
}; 

var ssc_initdone = false; 
var ssc_fixedback = true; 
var ssc_root = document.documentElement; 
var ssc_activeElement; 
var ssc_key = { 
    left: 37, 
    up: 38, 
    right: 39, 
    down: 40, 
    spacebar: 32, 
    pageup: 33, 
    pagedown: 34, 
    end: 35, 
    home: 36 
}; 

var ssc_que = []; 
var ssc_pending = false; 
var ssc_cache = {}; 

setInterval(function() { 
    ssc_cache = {} 
}, 10 * 1e3); 

var ssc_uniqueID = function() { 
    var e = 0; 
    return function(t) { 
    return t.ssc_uniqueID || (t.ssc_uniqueID = e++) 
    } 
}(); 

var ischrome = /chrome/.test(navigator.userAgent.toLowerCase()); 

if (ischrome) { 
    ssc_addEvent("mousedown", ssc_mousedown); 
    ssc_addEvent("mousewheel", ssc_wheel); 
    ssc_addEvent("load", ssc_init) 
} 

Answer 1

Это не проблема Javascript, но проблема CSS.

Прежде всего вы логотип img слишком велик. это толкает навигатор вниз и не соответствует расчёту. Исправьте это:

.navbar-brand img { 
    max-height: 110px; 
} 

Затем мы должны добавить разницу в верхнюю часть содержимого страницы.

.title-area, .page-content { 
    margin-top: 40px; 
} 

Добавьте его в custom.csss и он будет решать ваши проблемы

Answer 2

Я решил проблему путем редактирования файла JavaScript. Он удалял «липкий» класс, когда прокручивался до самого верха, что аннулировало некоторые из моих изменений css, с которыми я хотел остаться. Поэтому, отредактировав javascript, чтобы документ всегда был «липким», я смог сделать заголовок более крупным, как я хотел.