Skip to content

sj-js/fixman

Repository files navigation

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>