5 декабря 2014 в 19:22
Доброго всем времени суток.
На сайте реализовано меню с плавной прокруткой к ID элемента, модулем "Scroll to destination anchors". Прокрутка выполняется все отлично, но шапка сайта (около 100 пикселей высотой) прилеплена к верху страницы position: fixed и получается что при скроллинге заголовок нужного блока оказывается под этой шапкой. Собственно как задать этот отступ от верха, чтобы блок с нужным ID останавливался за 100-120px до верхнего края.
js скрипт этого модуля выглядит так, можно ли здесь дописать этот отступ ко всем ID сразу или к каждому по отдельности?
(function($) {
Drupal.behaviors.scrolltoanchors = {
attach: function(context, settings) {
$(document).ready(function(){
function validateSelector(a) {
return /^#[a-z]{1}[a-z0-9_-]*$/i.test(a);
}
function scrollToDestination(a,b) {
if (a > b) {
destination = b;
} else {
destination = a;
}
$('html,body').animate({ scrollTop: destination }, 1800, 'swing');
}
$('a[href^="#"]', context).click(function(event) {
event.preventDefault();
var hrefValue = $(this).attr('href');
var strippedHref = hrefValue.replace('#','');
var heightDifference = $(document).height() - $(window).height();
if (validateSelector(hrefValue)) {
if ($(hrefValue).length > 0) {
var linkOffset = $(this.hash).offset().top;
scrollToDestination(linkOffset, heightDifference);
}
else if ($('a[name=' + strippedHref + ']').length > 0) {
var linkOffset = $('a[name=' + strippedHref + ']').offset().top;
scrollToDestination(linkOffset, heightDifference);
}
}
});
});
}
};
}(jQuery));
Drupal.behaviors.scrolltoanchors = {
attach: function(context, settings) {
$(document).ready(function(){
function validateSelector(a) {
return /^#[a-z]{1}[a-z0-9_-]*$/i.test(a);
}
function scrollToDestination(a,b) {
if (a > b) {
destination = b;
} else {
destination = a;
}
$('html,body').animate({ scrollTop: destination }, 1800, 'swing');
}
$('a[href^="#"]', context).click(function(event) {
event.preventDefault();
var hrefValue = $(this).attr('href');
var strippedHref = hrefValue.replace('#','');
var heightDifference = $(document).height() - $(window).height();
if (validateSelector(hrefValue)) {
if ($(hrefValue).length > 0) {
var linkOffset = $(this.hash).offset().top;
scrollToDestination(linkOffset, heightDifference);
}
else if ($('a[name=' + strippedHref + ']').length > 0) {
var linkOffset = $('a[name=' + strippedHref + ']').offset().top;
scrollToDestination(linkOffset, heightDifference);
}
}
});
});
}
};
}(jQuery));
Комментарии
Drupal.behaviors.scrolltoanchors = {
attach: function(context, settings) {
$(document).ready(function(){
function validateSelector(a) {
return /^#[a-z]{1}[a-z0-9_-]*$/i.test(a);
}
function scrollToDestination(a,b) {
if (a > b) {
destination = b;
} else {
destination = a;
}
$('html,body').animate({ scrollTop: destination - 100 }, 1800, 'swing');//см сюда
}
$('a[href^="#"]', context).click(function(event) {
event.preventDefault();
var hrefValue = $(this).attr('href');
var strippedHref = hrefValue.replace('#','');
var heightDifference = $(document).height() - $(window).height();
if (validateSelector(hrefValue)) {
if ($(hrefValue).length > 0) {
var linkOffset = $(this.hash).offset().top ;
scrollToDestination(linkOffset, heightDifference);
}
else if ($('a[name=' + strippedHref + ']').length > 0) {
var linkOffset = $('a[name=' + strippedHref + ']').offset().top;
scrollToDestination(linkOffset, heightDifference);
}
}
});
});
}
};
}(jQuery));
код странный...
Спасибо тебе! добрый человек)))
Насчет странности кода ничего сказать не могу, кроме того что он работает, к примеру тот же модуль "jQuery LocalScroll" конфликтует с colorbox