我是一個(gè)編程初學(xué)者，我正試圖在我的網(wǎng)站上創(chuàng)建一個(gè)具有粘性位置的響應(yīng)部分。
我試著讓內(nèi)容靠右對(duì)齊，卡片靠左對(duì)齊，但是我的布局在容器內(nèi)部出現(xiàn)了問(wèn)題，你能幫我嗎？
我試圖創(chuàng)建一個(gè)類(lèi)似下圖的部分，它可以響應(yīng)移動(dòng)設(shè)備。
位置有粘性的圖像
這是我的代碼，position sticky起作用了，但是我不能讓它有反應(yīng)，把內(nèi)容移到左邊，因?yàn)檎麄€(gè)布局都破了。
* *僅使用css可以做到這一點(diǎn)嗎？沒(méi)有javascript？ **
我的HTML文件:
<section class="container">
<div class="o-grid o-grid--wide js-stickyWrapper">
<div class="o-grid__item u-1/2">
<div class="o-box o-square">
</div><!-- /o-box__item -->
<div class="o-box o-square">
</div><!-- /o-box__item -->
<div class="o-box o-square">
</div><!-- /o-box__item -->
<div class="o-box o-square">
</div><!-- /o-box__item -->
</div><!-- /o-grid__item -->
<div class="o-grid__item u-1/2">
<div class="js-sticky">
<h1 style="color: white">If I fits, I sits</h1>
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Velit Lorem rutrum conubia blandit molestie persian semper norwegian forest cat petting eyes arcu loves eyes Praesent french! Mr. Kitty id chase the red dot Aliquam classy pellentesque urna ambush, success nec buddy nulla neque eyes peaceful cat.</p>
<p>At, medium hair kitten furball grazing ipsum birdwatch tortor couch finally ham cat headbutt accumsan in?</p>
</div><!-- /js-sticky -->
</div><!-- /o-grid__item -->
</div><!-- /o-grid -->
</section>**CSS代碼 **
.container {
width: 100%;
max-width: 143.5rem;
margin: 0 auto;
padding: 0 1.5rem
}
@media(max-width: 1440px) {
.container {
max-width: 124.8rem
}
}
.is-sticky {
position: fixed;
}
.is-sunk {
position: absolute;
bottom: 0;
}
.is-sunk-wrapper {
position: relative;
}
.o-box {
background-color: red;
margin-bottom: 3rem;
}
.o-box:last-child{
margin-bottom: 0;
}
.o-square:before {
content: "";
display: block;
padding-top: 100%;
}
h1,
p {
margin-top: 0;
}
p:last-child { margin-bottom: 0; }
h1 { color: #000; }
/**
* Objects
*/
.o-grid {
align-items: top;
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
margin-left: -1.5rem;
}
.o-grid__item {
box-sizing: border-box;
padding-left: 1.5rem;
width: 100%;
}
.o-grid--wide {
margin-left: -3rem;
> .o-grid__item {
padding-left: 3rem;
}
}
/**
* Utilities
*/
.u-1\/2 {
width: 50%;
}JS代碼:
(function (root, factory) {
if ( typeof define === 'function' && define.amd ) {
define([], factory(root));
} else if ( typeof exports === 'object' ) {
module.exports = factory(require());
} else {
root.stickMe = factory(root);
}
})(typeof global !== "undefined" ? global : this.window || this.global, function (root) {
/**
* Variables
*/
var stickMe = {};
var supports = !!document.querySelector && !!root.addEventListener;
var settings;
// Default settings
var defaults = {
element : "js-sticky",
wrapper : "js-stickyWrapper",
classNameSticky : "is-sticky",
classNameSunk : "is-sunk",
classNameSunkWrapper : "is-sunk-wrapper",
offset : 48
};
//
// Methods
//
/**
* Handle events
* @private
* @param {event} Event
*/
var eventHandler = function ( event ) {
// On scroll
if ( event.type === "scroll" ) {
// Debounce scroll and trigger stickyness
handleScrollEvents();
}
};
/**
* Handle scroll events efficiently
* @private
*/
var handleScrollEvents = function () {
var latestKnownScrollY = 0,
ticking = false;
function onScroll() {
latestKnownScrollY = window.scrollY;
requestTick();
}
function requestTick() {
if ( !ticking ) {
requestAnimationFrame( update );
}
ticking = true;
}
function update() {
// reset the tick so we can
// capture the next onScroll
ticking = false;
var currentScrollY = latestKnownScrollY;
// Activate the stickyness
activate( currentScrollY );
}
onScroll();
};
/**
* Extend defaults with user options
* @private
* @param {object} source
* @param {object} properties
*/
var extendDefaults = function ( source, properties ) {
var property;
for ( property in properties ) {
if ( properties.hasOwnProperty( property ) ) {
source[property] = properties[property];
}
}
return source;
};
/**
* Get top and left position of element
* @private
* @param {node} element
*/
var getOffset = function ( element ) {
element = element.getBoundingClientRect();
return {
left: element.left + window.scrollX,
top: element.top + window.scrollY
}
}
/**
* Stick element in place
* @private
* @param {node} element
*/
var stick = function ( element ) {
var width = element.offsetWidth;
//var width = getRectangle( element ).width;
element.classList.add( settings.classNameSticky );
css( element, {
top: settings.offset + "px",
width: width + "px"
});
}
/**
* Unstick our stuck element
* @private
* @param {node} element
*/
var unStick = function ( element ) {
element.classList.remove( settings.classNameSticky );
element.style.top = "";
element.style.width = "";
}
/**
* Sink element to bottom of wrapper
* @private
* @param {node} element
* @param {node} wrapper
*/
var sink = function ( element, wrapper ) {
element.classList.add( settings.classNameSunk );
wrapper.classList.add( settings.classNameSunkWrapper );
}
/**
* Unsink our sunk element
* @private
* @param {node} element
* @param {node} wrapper
*/
var unSink = function ( element, wrapper ) {
element.classList.remove( settings.classNameSunk );
wrapper.classList.remove( settings.classNameSunkWrapper );
}
/**
* Activate stickyness
* @private
* @param {string} position Scroll position
*/
var activate = function ( position ) {
var element = document.getElementsByClassName( settings.element )[0],
wrapper = document.getElementsByClassName( settings.wrapper )[0],
height = wrapper.offsetHeight - element.offsetHeight,
top = getOffset( wrapper ).top,
bottom = ( top + height ) - settings.offset,
start = top - settings.offset;
if ( position >= start ) {
if ( position >= bottom ) {
unStick( element );
sink( element, wrapper );
} else {
stick( element );
unSink( element, wrapper );
}
} else {
unStick( element );
}
}
/**
* A helper function for adding/remove CSS properties
* @private
* @param {node} element
* @param {object} properties
*/
var css = function ( element, properties ) {
for ( var property in properties ) {
if ( properties.hasOwnProperty( property ) ) {
element.style[ property ] = properties[ property ];
}
}
};
/**
* A function that returns element width, height, top, and left
* @private
* @param {node} element
* @return {object}
*/
var getRectangle = function ( element ) {
css( element, { position: '', width: '', top: '', left: '' } );
var width = Math.max( element.offsetWidth, element.clientWidth, element.scrollWidth );
var height = Math.max( element.offsetHeight, element.clientHeight, element.scrollHeight );
var top = 0;
var left = 0;
do {
top += element.offsetTop || 0;
left += element.offsetLeft || 0;
element = element.offsetParent;
} while ( element );
return { top: top, left: left, width: width, height: height };
};
/**
* Destroy current initialisation
* @public
*/
stickMe.destroy = function () {
// If sticky isn't already initialised, stop
if ( !settings ) return;
// @todo Undo any other init functions...
// Remove event listeners
window.removeEventListener( "scroll", eventHandler, false );
// Reset variables
settings = null;
};
/**
* Initialise plugin
* @public
* @param {Object} options User settings
*/
stickMe.init = function ( options ) {
// feature test
if ( !supports ) return;
// Destroy any existing initialisations
stickMe.destroy();
// Extend defaults with user options
settings = extendDefaults( defaults, options || {} );
// Listen for scroll events
window.addEventListener( "scroll", eventHandler, false );
};
return stickMe;
});
stickMe.init({
offset: 48
});