How to implement horizontal scrolling and floating navigation in js-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to implement horizontal scrolling and floating navigation in js

Mar 16, 2018 pm 02:39 PM

javascript float scroll

This time I will show you how to implement horizontal scrolling and floating navigation in js, what are the precautions for implementing horizontal scrolling and floating navigation in js, as follows This is a practical case, let’s take a look at it.

Horizontal scrolling, this method is the simplest I have ever seen.

#demo {
 background: #FFF;
 overflow: hidden;
 border: 1px dashed #CCC;
 width: 1170px;border: 1px solid red;
    margin-left: 10px;
}#demo img {border: 3px solid #F2F2F2;
}#indemo {float: left;width: 800%;
}#demo1 {float: left;
}#demo2 {float: left;
}

Copy after login

View Code

 &lt;p id=&quot;demo&quot; &gt;&lt;p id=&quot;indemo&quot;&gt;&lt;p id=&quot;demo1&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;../Images/jiameng/1.png&quot; border=&quot;0&quot; /&gt;&lt;/a&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;../Images/jiameng/2.png&quot; border=&quot;0&quot; /&gt;&lt;/a&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;../Images/jiameng/3.png&quot; border=&quot;0&quot; /&gt;&lt;/a&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;../Images/jiameng/4.png&quot; border=&quot;0&quot; /&gt;&lt;/a&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;../Images/jiameng/5.png&quot; border=&quot;0&quot; /&gt;&lt;/a&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;../Images/jiameng/6.png&quot; border=&quot;0&quot; /&gt;&lt;/a&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;../Images/jiameng/7.png&quot; border=&quot;0&quot; /&gt;&lt;/a&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;../Images/jiameng/8.png&quot; border=&quot;0&quot; /&gt;&lt;/a&gt;&lt;/p&gt;&lt;p id=&quot;demo2&quot;&gt;&lt;/p&gt;

Copy after login

View Code

&lt;script&gt;                var speed = 10;                var tab = document.getElementById("demo");                var tab1 = document.getElementById("demo1");                var tab2 = document.getElementById("demo2");
                tab2.innerHTML = tab1.innerHTML;                function Marquee() {                    if (tab2.offsetWidth - tab.scrollLeft &lt;= 0) {
                        tab.scrollLeft -= tab1.offsetWidth;
                       
                    } else {
                        tab.scrollLeft += 2;
                     
                    }
                }                var MyMar = setInterval(Marquee, speed);
                tab.onmouseover = function () { clearInterval(MyMar); };
                tab.onmouseout = function () { MyMar = setInterval(Marquee, speed); };&lt;/script&gt;

Copy after login

Smooth scrolling. Why did it not scroll when I used it yesterday? Then I changed the increased value of tab.srollLeft and it was fine.

2. Floating navigation:

&lt;script type=&quot;text/javascript&quot; src=&quot;http://misc.jjcdn.com/resource/js/waypoints.js&quot;&gt;&lt;/script&gt; 
&lt;script type=&quot;text/javascript&quot;&gt; 
//浮动导航 waypoints.js $('#main-nav-holder').waypoint(function (event, direction) { 
$(this).parent().toggleClass('sticky', direction === "down"); 
event.stopPropagation(); 
}); 
&lt;/script&gt;

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!