افزودن آیکون شبکه اجتماعی شناور با jQuery

اشتراک گذاری صفحه وب در شبکه های اجتماعی (Social Media) برای انتشار سریع مطالب در سطح وسیع تر کاربرد دارد. بنابراین افزودن آیکون شبکه اجتماعی شناور به منظور اینکه کاربران مقالات شما را به اشتراک بگذارند, بسیار مهم است.

خوانندگان مطالب می خواهند که در همان لحظه که صفحه را مطالعه می کنند به اشتراک بگذارند, بنابراین, خیلی خوب است که یک سطح دسترسی و نمایش بالایی برای آیکون های شبکه اجتماعی در صفحه وب خود ایجاد کنید.

در این آموزش, قصد افزودن آیکون شبکه اجتماعی شناور با jQuery در سایدبار را در همان لحظه همراه با اسکرول شدن صفحه, داریم.

ما از jQuery برای دریافت ویژگی های CSS آیکون های اشتراک گذاری و دستکاری پوزیشن (position) آنها به هتکام اسکرول (scroll) صفحه, استفاده می کنیم. با اسکرول صفحه, کد ما موقعیت صفحه و المنت های آیکون را مقایسه می کند. براساس این مقایسه, position آیکون ها را برای چسبان کردن, تغییر می دهد.

کد HTML افزودن آیکون شبکه اجتماعی شناور

کد HTML زیر برای ساخت صفحه وب با آیکون های شبکه اجتماعی در سایدبار استفاده شده است. این آیکون ها در سایدبار سمت چپ بعد از آیتم های لیست منو نمایش داده می شوند.

<div>
    <div class="left-side-bar">
        <ul>
            <li>Integer Vitae</li>
            <li>Vivamus Lacinia</li>
            <li>Donec Rutrum</li>
            <li>Sed Lacinia</li>
            <li>Morbi ut Turpis</li>
            <li>Rhoncus Nunc</li>
            <li>Sed id Turpis</li>
            <li>Vestibulum Commodo</li>
            <li>Pellentesque Nec</li>
            <li>Fusce Amet</li>
            <li>Donec Sem</li>
            <li>Praesent Iaculis</li>
            <li>Tellus Tincidunt</li>
            <li>Nunc Mollis</li>
            <li>Quisque Urna</li>
        </ul>
        <div class="social-icon">
            <img src="icon/facebook-social.png"
                title="Share on Facebook" /> <img
                src="icon/twitter-social.png" title="Share on Twitter" />
            <img src="icon/linkedin-social.png"
                title="Share on Linkedin" /> <img
                src="icon/email-social.png" title="Share on Email" />
        </div>
    </div>
    <div class="main-content">
        <p>Quisque vitae erat et turpis sollicitudin sodales. Morbi
            auctor placerat urna at sodales. Class aptent taciti
            sociosqu ad litora torquent per conubia nostra, per inceptos
            himenaeos. Nunc faucibus arcu sit amet nibh convallis
            blandit. Nullam et sapien ac eros aliquam eleifend a sed
            odio. Proin in ex imperdiet augue suscipit maximus.
            Pellentesque malesuada, diam a mollis varius, felis sapien
            pharetra felis, a suscipit leo massa sit amet magna. Morbi
            maximus lacus a ex varius semper. Aliquam erat volutpat. Sed
            luctus turpis sollicitudin facilisis cursus. Vestibulum
            sodales ligula eu congue placerat. Curabitur est orci,
            suscipit vel blandit sed, commodo at sem. Duis id facilisis
            augue, vel ornare est. Aenean sollicitudin, odio in ultrices
            faucibus, neque quam facilisis nunc, eu bibendum eros quam
            eu dolor.</p>
    </div>
</div>

<div>

<ul>

<li>Integer Vitae</li>

<li>Vivamus Lacinia</li>

<li>Donec Rutrum</li>

<li>Sed Lacinia</li>

<li>Morbi ut Turpis</li>

<li>Rhoncus Nunc</li>

<li>Sed id Turpis</li>

<li>Vestibulum Commodo</li>

<li>Pellentesque Nec</li>

<li>Fusce Amet</li>

<li>Donec Sem</li>

<li>Praesent Iaculis</li>

<li>Tellus Tincidunt</li>

<li>Nunc Mollis</li>

<li>Quisque Urna</li>

</ul>

<img src="icon/facebook-social.png"

title="Share on Facebook" /> <img

src="icon/twitter-social.png" title="Share on Twitter" />

<img src="icon/linkedin-social.png"

title="Share on Linkedin" /> <img

src="icon/email-social.png" title="Share on Email" />

</div>

<p>Quisque vitae erat et turpis sollicitudin sodales. Morbi

auctor placerat urna at sodales. Class aptent taciti

sociosqu ad litora torquent per conubia nostra, per inceptos

himenaeos. Nunc faucibus arcu sit amet nibh convallis

blandit. Nullam et sapien ac eros aliquam eleifend a sed

odio. Proin in ex imperdiet augue suscipit maximus.

Pellentesque malesuada, diam a mollis varius, felis sapien

pharetra felis, a suscipit leo massa sit amet magna. Morbi

maximus lacus a ex varius semper. Aliquam erat volutpat. Sed

luctus turpis sollicitudin facilisis cursus. Vestibulum

sodales ligula eu congue placerat. Curabitur est orci,

suscipit vel blandit sed, commodo at sem. Duis id facilisis

augue, vel ornare est. Aenean sollicitudin, odio in ultrices

faucibus, neque quam facilisis nunc, eu bibendum eros quam

eu dolor.</p>

</div>

و استایل های CSS

<style>
body {
	font-family: Arial;
}

.left-side-bar {
	width: 250px;
	float: left;
}

.main-content {
	float: left;
	width: 80%;
    height:100px;
	font-size: 1.2em;
	line-height: 70px;
	color: #919c9e;
}

.left-side-bar ul li {
	padding: 15PX;
	background: #bdcacc;
	margin: 0px;
	COLOR: #5c6567;
	border-bottom: #c9d6d8 1px solid;
}

.left-side-bar ul {
	list-style: none;
	margin: 0px 20px 0px 0px;
	padding: 0PX;
}

.social-icon {
	padding: 20px;
}

.social-icon img {
	padding: 0px 5px;
}
</style>

<style>

body {

font-family: Arial;

}

.left-side-bar {

width: 250px;

float: left;

}

.main-content {

float: left;

width: 80%;

height:100px;

font-size: 1.2em;

line-height: 70px;

color: #919c9e;

}

.left-side-bar ul li {

padding: 15PX;

background: #bdcacc;

margin: 0px;

COLOR: #5c6567;

border-bottom: #c9d6d8 1px solid;

}

.left-side-bar ul {

list-style: none;

margin: 0px 20px 0px 0px;

padding: 0PX;

}

.social-icon {

padding: 20px;

}

.social-icon img {

padding: 0px 5px;

}

</style>

افزودن آیکون شبکه اجتماعی شناور با jQuery

کد jQuery زیر برای چسابندن آیکون های شبکه اجتماعی در سایدبار استفاده شده است. اسکریپت ما scrollTop صفحه و پوزیشن بالای آیکون ها را دریافت و به هنگام رویداد اسکرول آنها را مقایسه می کند.

زمانی که اندازه اسکرول بالای صفحه بیشتر از موقعیت بالای آیکون ها باشد, کد ما خاصیت position و top آیکون ها را تغییر می دهد تا بصورت چسبان (sticky) دربیاد.

<script>
    $(document).ready(function(){
        $( window ).scroll(function() {
        	   $( ".social-icon" ).css("position", "relative");
           $( ".social-icon" ).css("top", 0);
           if($( window ).scrollTop() > $( ".social-icon" ).position().top) {
        		  $( ".social-icon" ).css("position", "absolute");
        		  $( ".social-icon" ).css("top", $( window ).scrollTop());
        	   }
    		});
    });
</script>

$(document).ready(function(){

$( window ).scroll(function() {

$( ".social-icon" ).css("position", "relative");

$( ".social-icon" ).css("top", 0);

if($( window ).scrollTop() > $( ".social-icon" ).position().top) {

$( ".social-icon" ).css("position", "absolute");

$( ".social-icon" ).css("top", $( window ).scrollTop());

}

});

</script>

خروجی : افزودن آیکون شبکه اجتماعی شناور با jQuery

اسکرین شات زیر خروجی صفحه وب به همراه آیکون های شبکه اجتماعی در سایدبار را نشان می دهد.

امیدوارم از آموزش افزودن آیکون شبکه اجتماعی شناور با jQuery نهایت استفاده را برده باشید .

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید

افزودن آیکون شبکه اجتماعی شناور با jQuery

کد HTML افزودن آیکون شبکه اجتماعی شناور

و استایل های CSS

افزودن آیکون شبکه اجتماعی شناور با jQuery

خروجی : افزودن آیکون شبکه اجتماعی شناور با jQuery

دانـلود باکــس

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه