Skip to content

Commit

Permalink
update: readme, examples and project page
Browse files Browse the repository at this point in the history 
Redesigned examples
  • Loading branch information
@kovart
kovart committed Sep 30, 2019
1 parent 049d6ae commit bd17dd4
Show file tree
Hide file tree
Showing 13 changed files with 625 additions and 373 deletions.
21 changes: 10 additions & 11 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ Sticky blocks are perceived much better by your visitors than unfixed widgets an
* Super performance
* Zero dependencies
* Reacts to DOM changes
* Small size ~1.7Kb (minified gzip)
* Small size ~1.8Kb (minified gzip)

## Examples
- [Basic usage](https://codepen.io/kovart/pen/VReGjN)
Expand Down Expand Up @@ -87,7 +87,7 @@ Watch an example.

Then you should initialize an instance with a **new** keyword (it's important):
```js
var stickyElement = new Sticksy('.js-sticky-widget');
var stickyElement = new Sticksy('.js-sticky-widget')
// just for demonstration of state handling
stickyEl.onStateChanged = function (state) {
if(state === 'fixed') stickyEl.nodeRef.classList.add('widget--fixed')
Expand All @@ -96,6 +96,10 @@ stickyEl.onStateChanged = function (state) {
```
That's all 😎

Also, you can directly pass the target node:
```js
var stickyElement = new Sticksy(document.getElementById('sticky-widget'))
```
------

#### Initialize all sticky elements
Expand Down Expand Up @@ -127,15 +131,16 @@ If you want the library to react on DOM changes, you need to specify `listen` op
```js
var stickyEl = new Sticksy('.js-sticky-widget', {
listen: true, // Listen for the DOM changes in the container
});
})
```
> Beware! Since the library uses style attribute to change elements position,
> it ignores any changes in style attributes of sticky elements.
> it ignores changes of width and height properties of style attribute.
> Use CSS classes instead.
------

#### Via JQuery/Zepto:
```js
var stickyEl = $('.widget.js-sticky-widget').sticksy();
var stickyEl = $('.widget.js-sticky-widget').sticksy({topSpacing: 60, listen: true})
```

------
Expand Down Expand Up @@ -166,12 +171,6 @@ var stickyEl = new Sticksy('.block.js-sticky-widget', {
});
```


> Unfortunately, we cannot react to changes in the style attribute of sticky elements.
>The library uses the style attribute to make elements sticky and
>if we react all the time the attribute changes it will cause a performance leak.

### Instance object

### Properties
Expand Down
107 changes: 58 additions & 49 deletions docs/frames/basic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,55 +6,64 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>Header</header>
<div class="wrapper">
<main>
<h2>Article title</h2>
<p>
This dissertation joins a vibrant conversation in the social sciences about the challenging nature of care labor as well as feminist discussions about the role of the daughter in Victorian culture.
</p>
<p>
It explores the literary presence of the middle class managing daughter in the Victorian home. Collectively, the novels in this study articulate social anxieties about the unclear and unstable role of daughters in the family, the physically and emotionally challenging work they, and all women, do, and the struggle for daughters to find a place in a family hierarchy, which is often structured not by effort or affection, but by proscribed traditional roles, which do not easily adapt to managing daughters, even if they are the ones holding the family together.
</p>
<p>
The managing daughter is a problem not accounted for in any conventional domestic structure or ideology so there is no role, no clear set of responsibilities and no boundaries that could, and arguably should, define her obligations, offer her opportunities for empowerment, or set necessary limits on the broad cultural mandate she has to comfort and care others.
</p>
<p>
The extremes she is often pushed to reveals the stresses and hidden conflicts for authority and autonomy inherent in domestic labor without the iconic angel in the house rhetoric that so often masks the difficulties of domestic life for women. She gains no authority or stability no matter how loving or even how necessary she is to a family because there simply is no position in the parental family structure for her. The managing daughter thus reveals a deep crack in the structure of the traditional Victorian family by showing that it often cannot accommodate, protect, or validate a loving non-traditional family member because it values traditional hierarchies over emotion or effort. Yet, in doing so, it also suggests that if it is position not passion that matters, then as long as a woman assumes the right position in the family then deep emotional connections to others are not necessary for her to care competently for others
</p>
<p>
This dissertation joins a vibrant conversation in the social sciences about the challenging nature of care labor as well as feminist discussions about the role of the daughter in Victorian culture.
</p>
<p>
It explores the literary presence of the middle class managing daughter in the Victorian home. Collectively, the novels in this study articulate social anxieties about the unclear and unstable role of daughters in the family, the physically and emotionally challenging work they, and all women, do, and the struggle for daughters to find a place in a family hierarchy, which is often structured not by effort or affection, but by proscribed traditional roles, which do not easily adapt to managing daughters, even if they are the ones holding the family together.
</p>
</main>
<aside class="sidebar">
<div class="widget">
<h2>Article</h2>
<p>Lorem ipsum dolor sit amet, dolor sit.</p>
</div>
<div class="widget js-sticky-widget">
<h2>Ad</h2>
<p>GET YOUR 100% FREE TRIAL</p>
</div>
<div class="widget">
<h2>Article</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</aside>
<header class="header">
<div class="container">Move down ↓</div>
</header>
<div class="container">
<div class="content">
<main>
<article>
<div class="title"></div>
<div style="width: 55%" class="title"></div>
<br>
<br>
<div class="image">
<div class="mountain"></div>
<div class="mountain"></div>
<div class="sun"></div>
</div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="image">
<div class="mountain"></div>
<div class="mountain"></div>
<div class="sun"></div>
</div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="image">
<div class="mountain"></div>
<div class="mountain"></div>
<div class="sun"></div>
</div>
<div class="text"></div>
<div class="text"></div>
</article>
</main>
<aside>
<div class="widget"></div>
<div class="widget js-sticky-widget">
STICKY
</div>
<div class="widget"></div>
</aside>
</div>
<footer></footer>
<div class="filler">VERY BIG BLOCK</div>
</div>
<footer>Footer</footer>
<div class="filler">REALLY BIG BLOCK</div>
</div>
<script src="../sticksy.js"></script>
<script>
var stickyEl = new Sticksy('.widget.js-sticky-widget')
stickyEl.onStateChanged = function (state) {
if(state === 'fixed') stickyEl.nodeRef.classList.add('widget--sticky')
else stickyEl.nodeRef.classList.remove('widget--sticky')
}
</script>
<script src="../sticksy.js"></script>
<script>
var stickyEl = new Sticksy('.js-sticky-widget')
stickyEl.onStateChanged = function (state) {
if (state === 'fixed') stickyEl.nodeRef.classList.add('widget--sticky')
else stickyEl.nodeRef.classList.remove('widget--sticky')
}
</script>
</body>
</html>
109 changes: 58 additions & 51 deletions docs/frames/fixed-panel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,57 +6,64 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header header--fixed">
Fixed Header
</header>
<div class="container">
<div class="wrapper">
<main>
<h2>Article title</h2>
<p>
This dissertation joins a vibrant conversation in the social sciences about the challenging nature of care labor as well as feminist discussions about the role of the daughter in Victorian culture.
</p>
<p>
It explores the literary presence of the middle class managing daughter in the Victorian home. Collectively, the novels in this study articulate social anxieties about the unclear and unstable role of daughters in the family, the physically and emotionally challenging work they, and all women, do, and the struggle for daughters to find a place in a family hierarchy, which is often structured not by effort or affection, but by proscribed traditional roles, which do not easily adapt to managing daughters, even if they are the ones holding the family together.
</p>
<p>
The managing daughter is a problem not accounted for in any conventional domestic structure or ideology so there is no role, no clear set of responsibilities and no boundaries that could, and arguably should, define her obligations, offer her opportunities for empowerment, or set necessary limits on the broad cultural mandate she has to comfort and care others.
</p>
<p>
The extremes she is often pushed to reveals the stresses and hidden conflicts for authority and autonomy inherent in domestic labor without the iconic angel in the house rhetoric that so often masks the difficulties of domestic life for women. She gains no authority or stability no matter how loving or even how necessary she is to a family because there simply is no position in the parental family structure for her. The managing daughter thus reveals a deep crack in the structure of the traditional Victorian family by showing that it often cannot accommodate, protect, or validate a loving non-traditional family member because it values traditional hierarchies over emotion or effort. Yet, in doing so, it also suggests that if it is position not passion that matters, then as long as a woman assumes the right position in the family then deep emotional connections to others are not necessary for her to care competently for others
</p>
<p>
This dissertation joins a vibrant conversation in the social sciences about the challenging nature of care labor as well as feminist discussions about the role of the daughter in Victorian culture.
</p>
<p>
It explores the literary presence of the middle class managing daughter in the Victorian home. Collectively, the novels in this study articulate social anxieties about the unclear and unstable role of daughters in the family, the physically and emotionally challenging work they, and all women, do, and the struggle for daughters to find a place in a family hierarchy, which is often structured not by effort or affection, but by proscribed traditional roles, which do not easily adapt to managing daughters, even if they are the ones holding the family together.
</p>
</main>
<aside class="sidebar">
<div class="widget">
<h2>Article</h2>
<p>Lorem ipsum dolor sit amet, dolor sit.</p>
</div>
<div class="widget js-sticky-widget">
<h2>Ad</h2>
<p>GET YOUR 100% FREE TRIAL</p>
</div>
<div class="widget">
<h2>Article</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</aside>
<header class="header header--sticky">
<div class="container">Move down ↓</div>
</header>
<div class="container">
<div class="content">
<main>
<article>
<div class="title"></div>
<div style="width: 55%" class="title"></div>
<br>
<br>
<div class="image">
<div class="mountain"></div>
<div class="mountain"></div>
<div class="sun"></div>
</div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="image">
<div class="mountain"></div>
<div class="mountain"></div>
<div class="sun"></div>
</div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="text"></div>
<div class="image">
<div class="mountain"></div>
<div class="mountain"></div>
<div class="sun"></div>
</div>
<div class="text"></div>
<div class="text"></div>
</article>
</main>
<aside>
<div class="widget"></div>
<div class="widget js-sticky-widget">
STICKY
</div>
<div class="widget"></div>
</aside>
</div>
<footer></footer>
<div class="filler">VERY BIG BLOCK</div>
</div>
<footer>Footer</footer>
<div class="filler">REALLY BIG BLOCK</div>
</div>
<script src="../sticksy.js"></script>
<script>
var stickyEl = new Sticksy('.widget.js-sticky-widget', {topSpacing: 70})
stickyEl.onStateChanged = function (state) {
if(state === 'fixed') stickyEl.nodeRef.classList.add('widget--sticky')
else stickyEl.nodeRef.classList.remove('widget--sticky')
}
</script>
<script src="../sticksy.js"></script>
<script>
var stickyEl = new Sticksy('.js-sticky-widget', {topSpacing: 60})
stickyEl.onStateChanged = function (state) {
if (state === 'fixed') stickyEl.nodeRef.classList.add('widget--sticky')
else stickyEl.nodeRef.classList.remove('widget--sticky')
}
</script>
</body>
</html>
2 changes: 1 addition & 1 deletion docs/frames/multiple-items.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ <h1>Move down ↓</h1>
<div class="block"></div>
</div>
</div>
<div class="filler">REALLY BIG BLOCK</div>
<div class="filler">VERY BIG BLOCK</div>
<script src="../sticksy.js"></script>
<script>
Sticksy.initializeAll('.js-sticky-widget', {listen: true})
Expand Down
Loading

0 comments on commit bd17dd4

Please sign in to comment.