Skip to content

Latest commit

 

History

History
78 lines (68 loc) · 2.92 KB

README.md

File metadata and controls

78 lines (68 loc) · 2.92 KB
Raw

FixMan

📌

Build Status All Download Release License

1. Getting Started

  1. Load

    • Browser 
      <script src="https://cdn.jsdelivr.net/npm/@sj-js/crossman/dist/js/crossman.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@sj-js/fixman/dist/js/fixman.min.js"></script>
<script>
     var fixman = new FixMan();
</script>
    • ES6+ 
      npm i @sj-js/fixman
      const FixMan = require('@sj-js/fixman');
const fixman = new FixMan();

  2. Set data-fixed to target element

    <div data-fixed>Hello</div>

  3. Run detect() then, When Page is Loaded, detect and apply elements with a data-fixed attribute

    fixman.detect();

  4. Simple Example

    <!DOCTYPE html>
<HTML>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/@sj-js/crossman/dist/js/crossman.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@sj-js/fixman/dist/js/fixman.min.js"></script>
        <script>
            var fixman = new FixMan();
        </script>
        <script>
            fixman.detect();
        </script>
    </head>

    <style>
        .test1 { display:block; height:50px; border:2px solid black; margin-bottom:200px; }
    </style>

    <body>
        <div class="test1">Please scroll down.</div>
        <div class="test1" style="width:500px; background:#FFFFFF;" data-fixed>
            <span style="font-size:30px">안녕?</span>
            <input type="text" value="Some Text">
            <button onclick="alert('Testing');">🔎</button>
            <button onclick="window.scrollTo({top:0, behavior:'smooth'});">🔝</button>
        </div>
        <div class="test1" style="width:250px; background:pink;">Hello?</div>
        <div class="test1" style="width:200px; background:skyblue;">Annyeong?</div>
        <div class="test1" style="width:300px; background:gold;">Konnichiwa? and Nihao? or Hola?</div>
        <div class="test1" style="width:500px; background:forestgreen;">How are you?</div>
        <div class="test1" style="width:800px; background:chocolate;">Como esta?</div>
    </body>
</HTML>