bagusindrayana / scrollpage-js Goto Github PK

Thank you for your effort. I appreciate the small, and not overly complicated package. I think it is a few minor improvements from being a valuable resource. Nice job.

but... I found another issue.

Codepen

If in a layout such as

<div>PARENT
  <div>PREVIOUS SIBLING</div>
  <div id="main-page">
    <div  id="page1"></div>
    <div  id="page2"></div>
    <div  id="page3"></div>
  </div>
</div>

scrolling down, then back up does not show PARENT or PREVIOUS SIBLING and they stay inaccessible. I probably is reasonable to require main-page to be first child below a parent, but the parent should be respected (pun intended).

They appear to be recognized, but do not fire page scroll functionality.

https://codepen.io/c4p/pen/ZEaxbxx?editors=1111

Clicking on a menu item does give it the appropriate "active" class, but the class is not updated on a scrollpage event. Also active class for 1st menu items should be added on initialization rather than requiring hardcoded. Thanks for a small and great project.

A humble addition to the documentation. If you decide to use it, consider forking the codepen and changing the link so I don't accidentally change it.

Replacing the #Menu section of README.md

Basic Menu

You can add a custom menu that works to control the page, this will read every element that is in the menu element and if those elements are clicked it will redirect to the page based on the data-page attribute.

Every selected menu both menu item and page element will be add active class, you can change class name with pageSelectedClass and menuSelectedClass in options.

<ul class="side-nav">
    <!-- add the `data-page` attribute that contains the selector to the page element -->
    <li data-page="#page1">Page 1</li>
    <li data-page="#page2">Page 2</li>
    <li data-page="#page3">Page 3</li>
</ul>

const scrollPage = new ScrollPage("#main-page",{
    menu:"ul.side-nav",//menu selector
});

Advanced Menu

In this example the menu will only display dots and on hover will show the page name.

Codepen

<ul class="side-nav">
    <!-- add the `data-hovertext` attribute to represent the hover text -->
    <li data-page="#page1" data-hovertext="Page 1"></li>
    <li data-page="#page2" data-hovertext="Page 2"></li>
    <li data-page="#page3" data-hovertext="Page 3"></li>
</ul>

All the functionality happens in CSS.

/* below relates to scollPage-js Advanced Menu */
:root {
    --dotMenuColor: black;
    --dotMenuCircleSize: 7px;
    --dotMenuBWCircles: 7px;
}

ul.side-nav {
    position: fixed;
    top: 50%;
    transform: translate(0, -50%);
    right: 0;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    width: max-content;
    padding: 0;
    margin: 0;
    z-index: 999;
}

ul.side-nav li {
    position: relative;
    list-style: none;
    color: var(--dotMenuColor);
    border: 2px solid var(--dotMenuColor);
    border-radius: 50%;
    text-transform: uppercase;
    margin: var(--dotMenuBWCircles); 
    padding: var(--dotMenuCircleSize);
}

ul.side-nav li:hover {
    cursor: pointer;
    background-color: var(--dotMenuColor);
}

ul:hover li:not(:hover) {
    background-color: unset !important;
}

/* Careful if using some frameworks, this dynamically added style will be pruned, consider :global() */
ul.side-nav li.active {
	cursor: pointer;
	background-color: var(--dotMenuColor);
}

ul.side-nav li:after {
    content: attr(data-hovertext);
    position: absolute;
    color: var(--dotMenuColor);
    visibility: hidden;
    width: max-content;
    opacity: 0;
    top: -2px;
    z-index: 1;
    transition: opacity .25s ease-in-out;
}

ul.side-nav li:hover:after {
    visibility: visible;
    right: 25px;
    opacity: 1;
    transition: opacity .75s ease-in-out;
}

content that exceeds the parent is considered a "scroll" so it does not trigger scrollpage so it is necessary to check whether the content has css overflow (visible/auto/scroll) or not
this minor bug
if you set the css well and it's responsive it shouldn't be a problem