https://github.com/jaxgeller/splitfix.js

Implements a split view fixed effect.
https://github.com/jaxgeller/splitfix.js

Last synced: 16 days ago
JSON representation

Implements a split view fixed effect.

• Host: GitHub
• URL: https://github.com/jaxgeller/splitfix.js
• Owner: jaxgeller
• License: mit
• Created: 2015-10-26T21:30:24.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2015-10-26T23:54:20.000Z (about 9 years ago)
• Last Synced: 2024-11-12T07:59:59.893Z (about 2 months ago)
• Language: JavaScript
• Size: 129 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# SplitFix.js

SplitFix.js is a slim, performant, ES6 module, that implements a split view fixed effect.

You can see a demo [here](https://grandy.io)

### Install

`npm install splitfix.js` or include `dist.min.js` above.

### Example

SplitFix makes some quick assumptions about the layout of your site.

You need a containing element with left and right splits. A simple example looks like this,

HTML Setup

```html

  .container { overflow: hidden; position: relative; height: 200vh;}

  .not-fixed {

    height: 100%;

    width: 50%;

    float: left;

  }

  .fixed {

    right: 0;

    height: 200px;

    width: 50%;

    float: left;

  }



  

  



```

JS Setup


```javascript

import SplitFix from 'splitfix.js';

let elToBeFixed = '.fixed';

let splitContent = '.not-fixed';

let container = '.container';

new SplitFix(elToBeFixed, splitContent, container);

```

### Use

Since this is a specific effect, the way in which it's implemented is opinionated. The very least needs to be implemented with a container, left, and right sections.

```html



  

  



```


Where `.container` has a position of `relative` and the `.fixed` class has the direction 0'ed. Meaning, if fixed is on the left, `left: 0;` needs to be set.

With HTML setup, just create a new instance of ScrollFix

```javascript

new ScrollFix(fixedEl, notFixedEl, container);

```

SplitFix is intended to be a split layout, so for responsive design there will be a point where you dont want it fixed anymore. Call the same function above with a fourth parameter like so

```javascript

new ScrollFix(fixedEl, notFixedEl, container, 960);

```