0
更新されたバージョン20160718 CSSのファイルには2つの外部リンクが追加されています。だからもうパスにも問題はないはずです。スケルトンボイラープレート - CSSとjQueryが付いたスティッキーヘッダーが機能しない
私はhttp://getskeleton.com/でウェブページを作成し、getskeletonのウェブページに示されているような粘着性のあるヘッダを作成しようとします。
多くの研究の後、私はこのサイトhttps://github.com/bigspotteddog/ScrollToFixedを見つけ、スケルトンからCSSファイルを使ってbasic.htmlの例を作り直そうとしました。それはうまくいかず、私は本当に理由を知らない。
もちろん、basic.htmlの例も機能します。私はCSSやjQueryでうまくいかないので、私はおそらく非常に間違ったことをしたと思います。あなたの時間と助けてくれてありがとう！
HTMLとスティッキーヘッダのテストのためのCSSコード：
/*
* ScrollToFixed
* https://github.com/bigspotteddog/ScrollToFixed
*
* Copyright (c) 2011 Joseph Cava-Lynch
* MIT license
*/
(function($) {
$.isScrollToFixed = function(el) {
return !!$(el).data('ScrollToFixed');
};
$.ScrollToFixed = function(el, options) {
// To avoid scope issues, use 'base' instead of 'this' to reference this
// class from internal events and functions.
var base = this;
// Access to jQuery and DOM versions of element.
base.$el = $(el);
base.el = el;
// Add a reverse reference to the DOM object.
base.$el.data('ScrollToFixed', base);
// A flag so we know if the scroll has been reset.
var isReset = false;
// The element that was given to us to fix if scrolled above the top of
// the page.
var target = base.$el;
var position;
var originalPosition;
var originalFloat;
var originalOffsetTop;
var originalZIndex;
// The offset top of the element when resetScroll was called. This is
// used to determine if we have scrolled past the top of the element.
var offsetTop = 0;
// The offset left of the element when resetScroll was called. This is
// used to move the element left or right relative to the horizontal
// scroll.
var offsetLeft = 0;
var originalOffsetLeft = -1;
// This last offset used to move the element horizontally. This is used
// to determine if we need to move the element because we would not want
// to do that for no reason.
var lastOffsetLeft = -1;
// This is the element used to fill the void left by the target element
// when it goes fixed; otherwise, everything below it moves up the page.
var spacer = null;
var spacerClass;
var className;
// Capture the original offsets for the target element. This needs to be
// called whenever the page size changes or when the page is first
// scrolled. For some reason, calling this before the page is first
// scrolled causes the element to become fixed too late.
function resetScroll() {
// Set the element to it original positioning.
target.trigger('preUnfixed.ScrollToFixed');
setUnfixed();
target.trigger('unfixed.ScrollToFixed');
// Reset the last offset used to determine if the page has moved
// horizontally.
lastOffsetLeft = -1;
// Capture the offset top of the target element.
offsetTop = target.offset().top;
// Capture the offset left of the target element.
offsetLeft = target.offset().left;
// If the offsets option is on, alter the left offset.
if (base.options.offsets) {
offsetLeft += (target.offset().left - target.position().left);
}
if (originalOffsetLeft == -1) {
originalOffsetLeft = offsetLeft;
}
position = target.css('position');
// Set that this has been called at least once.
isReset = true;
if (base.options.bottom != -1) {
target.trigger('preFixed.ScrollToFixed');
setFixed();
target.trigger('fixed.ScrollToFixed');
}
}
function getLimit() {
var limit = base.options.limit;
if (!limit) return 0;
if (typeof(limit) === 'function') {
return limit.apply(target);
}
return limit;
}
// Returns whether the target element is fixed or not.
function isFixed() {
return position === 'fixed';
}
// Returns whether the target element is absolute or not.
function isAbsolute() {
return position === 'absolute';
}
function isUnfixed() {
return !(isFixed() || isAbsolute());
}
// Sets the target element to fixed. Also, sets the spacer to fill the
// void left by the target element.
function setFixed() {
// Only fix the target element and the spacer if we need to.
if (!isFixed()) {
//get REAL dimensions (decimal fix)
//Ref. http://stackoverflow.com/questions/3603065/how-to-make-jquery-to-not-round-value-returned-by-width
var dimensions = target[0].getBoundingClientRect();
// Set the spacer to fill the height and width of the target
// element, then display it.
spacer.css({
'display' : target.css('display'),
'width' : dimensions.width,
'height' : dimensions.height,
'float' : target.css('float')
});
// Set the target element to fixed and set its width so it does
// not fill the rest of the page horizontally. Also, set its top
// to the margin top specified in the options.
cssOptions={
'z-index' : base.options.zIndex,
'position' : 'fixed',
'top' : base.options.bottom == -1?getMarginTop():'',
'bottom' : base.options.bottom == -1?'':base.options.bottom,
'margin-left' : '0px'
}
if (!base.options.dontSetWidth){ cssOptions['width']=target.css('width'); };
target.css(cssOptions);
target.addClass(base.options.baseClassName);
if (base.options.className) {
target.addClass(base.options.className);
}
position = 'fixed';
}
}
function setAbsolute() {
var top = getLimit();
var left = offsetLeft;
if (base.options.removeOffsets) {
left = '';
top = top - offsetTop;
}
cssOptions={
'position' : 'absolute',
'top' : top,
'left' : left,
'margin-left' : '0px',
'bottom' : ''
}
if (!base.options.dontSetWidth){ cssOptions['width']=target.css('width'); };
target.css(cssOptions);
position = 'absolute';
}
// Sets the target element back to unfixed. Also, hides the spacer.
function setUnfixed() {
// Only unfix the target element and the spacer if we need to.
if (!isUnfixed()) {
lastOffsetLeft = -1;
// Hide the spacer now that the target element will fill the
// space.
spacer.css('display', 'none');
// Remove the style attributes that were added to the target.
// This will reverse the target back to the its original style.
target.css({
'z-index' : originalZIndex,
'width' : '',
'position' : originalPosition,
'left' : '',
'top' : originalOffsetTop,
'margin-left' : ''
});
target.removeClass('scroll-to-fixed-fixed');
if (base.options.className) {
target.removeClass(base.options.className);
}
position = null;
}
}
// Moves the target element left or right relative to the horizontal
// scroll position.
function setLeft(x) {
// Only if the scroll is not what it was last time we did this.
if (x != lastOffsetLeft) {
// Move the target element horizontally relative to its original
// horizontal position.
target.css('left', offsetLeft - x);
// Hold the last horizontal position set.
lastOffsetLeft = x;
}
}
function getMarginTop() {
var marginTop = base.options.marginTop;
if (!marginTop) return 0;
if (typeof(marginTop) === 'function') {
return marginTop.apply(target);
}
return marginTop;
}
// Checks to see if we need to do something based on new scroll position
// of the page.
function checkScroll() {
if (!$.isScrollToFixed(target) || target.is(':hidden')) return;
var wasReset = isReset;
var wasUnfixed = isUnfixed();
// If resetScroll has not yet been called, call it. This only
// happens once.
if (!isReset) {
resetScroll();
} else if (isUnfixed()) {
// if the offset has changed since the last scroll,
// we need to get it again.
// Capture the offset top of the target element.
offsetTop = target.offset().top;
// Capture the offset left of the target element.
offsetLeft = target.offset().left;
}
// Grab the current horizontal scroll position.
var x = $(window).scrollLeft();
// Grab the current vertical scroll position.
var y = $(window).scrollTop();
// Get the limit, if there is one.
var limit = getLimit();
// If the vertical scroll position, plus the optional margin, would
// put the target element at the specified limit, set the target
// element to absolute.
if (base.options.minWidth && $(window).width() < base.options.minWidth) {
if (!isUnfixed() || !wasReset) {
postPosition();
target.trigger('preUnfixed.ScrollToFixed');
setUnfixed();
target.trigger('unfixed.ScrollToFixed');
}
} else if (base.options.maxWidth && $(window).width() > base.options.maxWidth) {
if (!isUnfixed() || !wasReset) {
postPosition();
target.trigger('preUnfixed.ScrollToFixed');
setUnfixed();
target.trigger('unfixed.ScrollToFixed');
}
} else if (base.options.bottom == -1) {
// If the vertical scroll position, plus the optional margin, would
// put the target element at the specified limit, set the target
// element to absolute.
if (limit > 0 && y >= limit - getMarginTop()) {
if (!wasUnfixed && (!isAbsolute() || !wasReset)) {
postPosition();
target.trigger('preAbsolute.ScrollToFixed');
setAbsolute();
target.trigger('unfixed.ScrollToFixed');
}
// If the vertical scroll position, plus the optional margin, would
// put the target element above the top of the page, set the target
// element to fixed.
} else if (y >= offsetTop - getMarginTop()) {
if (!isFixed() || !wasReset) {
postPosition();
target.trigger('preFixed.ScrollToFixed');
// Set the target element to fixed.
setFixed();
// Reset the last offset left because we just went fixed.
lastOffsetLeft = -1;
target.trigger('fixed.ScrollToFixed');
}
// If the page has been scrolled horizontally as well, move the
// target element accordingly.
setLeft(x);
} else {
// Set the target element to unfixed, placing it where it was
// before.
if (!isUnfixed() || !wasReset) {
postPosition();
target.trigger('preUnfixed.ScrollToFixed');
setUnfixed();
target.trigger('unfixed.ScrollToFixed');
}
}
} else {
if (limit > 0) {
if (y + $(window).height() - target.outerHeight(true) >= limit - (getMarginTop() || -getBottom())) {
if (isFixed()) {
postPosition();
target.trigger('preUnfixed.ScrollToFixed');
if (originalPosition === 'absolute') {
setAbsolute();
} else {
setUnfixed();
}
target.trigger('unfixed.ScrollToFixed');
}
} else {
if (!isFixed()) {
postPosition();
target.trigger('preFixed.ScrollToFixed');
setFixed();
}
setLeft(x);
target.trigger('fixed.ScrollToFixed');
}
} else {
setLeft(x);
}
}
}
function getBottom() {
if (!base.options.bottom) return 0;
return base.options.bottom;
}
function postPosition() {
var position = target.css('position');
if (position == 'absolute') {
target.trigger('postAbsolute.ScrollToFixed');
} else if (position == 'fixed') {
target.trigger('postFixed.ScrollToFixed');
} else {
target.trigger('postUnfixed.ScrollToFixed');
}
}
var windowResize = function(event) {
// Check if the element is visible before updating it's position, which
// improves behavior with responsive designs where this element is hidden.
if(target.is(':visible')) {
isReset = false;
checkScroll();
} else {
// Ensure the spacer is hidden
setUnfixed();
}
}
var windowScroll = function(event) {
(!!window.requestAnimationFrame) ? requestAnimationFrame(checkScroll) : checkScroll();
}
// From: http://kangax.github.com/cft/#IS_POSITION_FIXED_SUPPORTED
var isPositionFixedSupported = function() {
var container = document.body;
if (document.createElement && container && container.appendChild && container.removeChild) {
var el = document.createElement('div');
if (!el.getBoundingClientRect) return null;
el.innerHTML = 'x';
el.style.cssText = 'position:fixed;top:100px;';
container.appendChild(el);
var originalHeight = container.style.height,
originalScrollTop = container.scrollTop;
container.style.height = '3000px';
container.scrollTop = 500;
var elementTop = el.getBoundingClientRect().top;
container.style.height = originalHeight;
var isSupported = (elementTop === 100);
container.removeChild(el);
container.scrollTop = originalScrollTop;
return isSupported;
}
return null;
}
var preventDefault = function(e) {
e = e || window.event;
if (e.preventDefault) {
e.preventDefault();
}
e.returnValue = false;
}
// Initializes this plugin. Captures the options passed in, turns this
// off for devices that do not support fixed position, adds the spacer,
// and binds to the window scroll and resize events.
base.init = function() {
// Capture the options for this plugin.
base.options = $.extend({}, $.ScrollToFixed.defaultOptions, options);
originalZIndex = target.css('z-index')
// Turn off this functionality for devices that do not support it.
// if (!(base.options && base.options.dontCheckForPositionFixedSupport)) {
// var fixedSupported = isPositionFixedSupported();
// if (!fixedSupported) return;
// }
// Put the target element on top of everything that could be below
// it. This reduces flicker when the target element is transitioning
// to fixed.
base.$el.css('z-index', base.options.zIndex);
// Create a spacer element to fill the void left by the target
// element when it goes fixed.
spacer = $('<div />');
position = target.css('position');
originalPosition = target.css('position');
originalFloat = target.css('float');
originalOffsetTop = target.css('top');
// Place the spacer right after the target element.
if (isUnfixed()) base.$el.after(spacer);
// Reset the target element offsets when the window is resized, then
// check to see if we need to fix or unfix the target element.
$(window).bind('resize.ScrollToFixed', windowResize);
// When the window scrolls, check to see if we need to fix or unfix
// the target element.
$(window).bind('scroll.ScrollToFixed', windowScroll);
// For touch devices, call checkScroll directlly rather than
// rAF wrapped windowScroll to animate the element
if ('ontouchmove' in window) {
$(window).bind('touchmove.ScrollToFixed', checkScroll);
}
if (base.options.preFixed) {
target.bind('preFixed.ScrollToFixed', base.options.preFixed);
}
if (base.options.postFixed) {
target.bind('postFixed.ScrollToFixed', base.options.postFixed);
}
if (base.options.preUnfixed) {
target.bind('preUnfixed.ScrollToFixed', base.options.preUnfixed);
}
if (base.options.postUnfixed) {
target.bind('postUnfixed.ScrollToFixed', base.options.postUnfixed);
}
if (base.options.preAbsolute) {
target.bind('preAbsolute.ScrollToFixed', base.options.preAbsolute);
}
if (base.options.postAbsolute) {
target.bind('postAbsolute.ScrollToFixed', base.options.postAbsolute);
}
if (base.options.fixed) {
target.bind('fixed.ScrollToFixed', base.options.fixed);
}
if (base.options.unfixed) {
target.bind('unfixed.ScrollToFixed', base.options.unfixed);
}
if (base.options.spacerClass) {
spacer.addClass(base.options.spacerClass);
}
target.bind('resize.ScrollToFixed', function() {
spacer.height(target.height());
});
target.bind('scroll.ScrollToFixed', function() {
target.trigger('preUnfixed.ScrollToFixed');
setUnfixed();
target.trigger('unfixed.ScrollToFixed');
checkScroll();
});
target.bind('detach.ScrollToFixed', function(ev) {
preventDefault(ev);
target.trigger('preUnfixed.ScrollToFixed');
setUnfixed();
target.trigger('unfixed.ScrollToFixed');
$(window).unbind('resize.ScrollToFixed', windowResize);
$(window).unbind('scroll.ScrollToFixed', windowScroll);
target.unbind('.ScrollToFixed');
//remove spacer from dom
spacer.remove();
base.$el.removeData('ScrollToFixed');
});
// Reset everything.
windowResize();
};
// Initialize the plugin.
base.init();
};
// Sets the option defaults.
$.ScrollToFixed.defaultOptions = {
marginTop : 0,
limit : 0,
bottom : -1,
zIndex : 1000,
baseClassName: 'scroll-to-fixed-fixed'
};
// Returns enhanced elements that will fix to the top of the page when the
// page is scrolled.
$.fn.scrollToFixed = function(options) {
return this.each(function() {
(new $.ScrollToFixed(this, options));
});
};
})(jQuery);<!DOCTYPE html>
<html lang="en">
<head>
<link href="http://getskeleton.com/dist/css/skeleton.css" rel="stylesheet"/>
<link href="http://getskeleton.com/dist/css/normalize.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-scrolltofixed.js"></script>
<script type="text/javascript">
$('.title').scrollToFixed();
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="twelve columns " style="margin-top: 10%">
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
</div>
\t <div class="container">
<section class="header">
<h4 class="title"><font size="16"><b>LK</b></font>{A homepage about me and my projects}</h4></p>
</section>
<div class="container">
<div class="row">
<div class="twelve columns " style="margin-top: 10%">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
</div>
</div>
</body>
</html>
あなたの関数は認識されません。おそらく 'jquery-scrolltofixed.js'ファイルへのパスが間違っていると思われます。スタイルシートはcssフォルダにあり、JSファイルはHTMLファイルと同じフォルダにあります。これは正しいですかJSフォルダ内のJSファイルですか？ – Lee