كيفية تثبيت الشريط الجانبي السايدبار عند التمرير لأعلى أو لأسفل

مقدمة

يٌعد تثبيت القائمة الجانبية (السايدبار) عند عمل اسكرول داون او اسكرول آب أو تمرير الصفحة لأعلى أو لإسفل أمراً بالغ الأهمية لدي منشيئ المحتوي على منصة بلوجر أو ووردبرس او اى موقع على الإنترنت
.. تأتى أهمية هذا فى تثبيت إعلانات طوال الوقت عند تصفح الزائر للموقع أو قرآئته مقال ما على الموقع .. المشكلة هو أن الزائر عندما يقرأ الموضوع أو يتصفح فيقوم بالنزول لأسفل أو يقوم بتحريك الصفحة لأعلى او لأسفل وبالتالى فإن الإعلانات او غيرها من العناصر الموجوده على الشريط الجانبي للمدونة أو الموقع تختفى او تصعد أو تنزل إلى الأسفل أو الأعلى وبالتالى لايوجد وجه إستفاده لأنه ربما لم يلاحظها الزائر بشكل مركز .. كما أن تثبيت القائمة الجانبية مهم للغاية إذا كنا نتحدث عن وضع إعلانات على السايدبار أو الشريط الجانبي للموقع أو المدونة .. بهذا يتم رؤية الإعلان طوال فترة تصفح الزائر و سواء قام بنزول الصفحة لأسفل أو الصعود لأعلى فسوف يكون الإعلان ظاهر أمامه مما يرفع نسبة النقر إلي الظهور لصالح الظهور وهذا أمراً بالغ الأهمية ضمن سياسات برنامج جوجل أدسنس ويتم عمل هذا من خلال اسكربتات جافا اسكربت التى نعطيها لكم مجاناً فى شرحنا اليوم .. لقد قمنا بعمل الشرح التالي لكيفية تثبيت الشريط الجانبي عند التمرير لأعلى أو لأسفل فتابع.

التعديل على السكربت

إبحث من خلال فحص العنصر عن الكلاس او الـ أي دي الخاص بالسايدبار الخاص بك class أو id

ملحوظه هامة يختلف كل قالب عن الآخر فى أسماء السايدبار لذلك يجب البحث ومعرفة الكود الخاص بالسايدبار للقالب الخاص بك.

على سبيل المثال إذا كان السايدبار الخاص بقالبك على الشكل التالي

<div class="sidebar">

فيتم تعديل السكربت الثاني بالأسفل وكتابة فقط إسم الكلاس الخاص بالسيدبار ليكون

اسم الكلاس الخاص بالسايدبار او القائمة الجانبية قم بتغيره للكلاس الخاص بالقائمة الجانبية او السايدبار بالقالب لديك غيره داخل السكربت على النحو التالي

(".sidebar")

إذا كان كود السايدبار عبارة عن class

<div class="sidebar">

فيتم كتابة الكلاس فى السكربت بهذا الشكل

.sidebar

التعديل على السكربت سيكون بالشكل التالي

$StickySidebar(".sidebar").theiaStickySidebar({
additionalMarginTop: 90,
additionalMarginBottom: -15,
});

إذا كان كود السايدبار عبارة عن id

<div id="sidebar">

فيتم كتابته فى السكربت بهذا الشكل

("#sidebar")

التعديل على السكربت سيكون بالشكل التالي

$StickySidebar("#sidebar").theiaStickySidebar({
additionalMarginTop: 90,
additionalMarginBottom: -15,
});

شرح التعديل على السكربت

additionalMarginTop: 90

هذا خاص بتغيير نسبة البعد عن رأس القالب العلوي أفضل قيمة او الإفتراضي من 0 الى 100

additionalMarginBottom: -15

هذا خاص بتغيير نسبة البعد عن تذييل او فوتر القالب أفضل قيمة او الإفتراضي هي 0 إلي أقل او سالب

وفى بعض القوالب نجد عدد (2) Sidebar واحد يمين المقالة و الاخر يسار المقالة نضع الكود الثانى مره اخرى مع تغير الكلاس باسم الكلاس الخاص بك لان كل منهما وله كلاس مختلف.

شرح تفصيلي أكثر.

إذا كان القالب يحتوي على قائمتين يسري وآخري يمني

إذا كان قالب مدونتك يحتوى على قائمتين إتبع نفس الخطوات التي قمنا بها مع تعديل طفيف فإذا وجدت في القائمة الثانية الكلاس الخاص بها مختلف ولنفترض أنه sidebar-2 فقط قم بنسخه وقم بالتعديل على السكريب مثلما شرحنا لكن فقط ضعه بالشكل التالي ..مع مراعات الفاصلة (,) بين العنصرين أي سوف يكون الكود بهذا الشكل.

$StickySidebar(".sidebar, .sidebar-2").theiaStickySidebar({
additionalMarginTop: 90,
additionalMarginBottom: -15,
});

قم بتعيين إسم الكلاس الأول (السايبدبار الأيسر) هو المحدد باللون الأزرق وإسم الكلاس الثاني (السايبدبار الأيمن) هو المحدد باللون الأخضر.

الشرح بالفيديو

يتم وضع السكربت فوق الوسم

</body>

السكربت:

<script type='text/javascript'>
/*<![CDATA[*/
 !function(i) {
    i.fn.theiaStickySidebar=function(t) {
        var e,
        o,
        a,
        s,
        n,
        d;

function r(t, e) {
            return !0===t.initialized|| !(i("body").width()<t.minWidth)&&(function(t, e) {
                t.initialized= !0, 0===i("#theia-sticky-sidebar-stylesheet-"+t.namespace).length&&i("head").append(i('<style id="theia-sticky-sidebar-stylesheet-'+t.namespace+'">.theiaStickySidebar:after {content: ""; display: table; clear: both;}</style>'));

e.each(function() {
                    var e= {}

;

if(e.sidebar=i(this), e.options=t|| {}

, e.container=i(e.options.containerSelector), 0==e.container.length&&(e.container=e.sidebar.parent()), e.sidebar.parents().css("-webkit-transform", "none"), e.sidebar.css( {
                        position: e.options.defaultPosition, overflow:"visible", "-webkit-box-sizing":"border-box", "-moz-box-sizing":"border-box", "box-sizing":"border-box"
                    }

), e.stickySidebar=e.sidebar.find(".theiaStickySidebar"), 0==e.stickySidebar.length) {
                        var o=/(?: text|application)\/(?:x-)?(?:javascript|ecmascript)/i;

e.sidebar.find("script").filter(function(i, t) {
                            return 0===t.type.length||t.type.match(o)
                        }

).remove(), e.stickySidebar=i("<div>").addClass("theiaStickySidebar").append(e.sidebar.children()), e.sidebar.append(e.stickySidebar)
                    }

e.marginBottom=parseInt(e.sidebar.css("margin-bottom")), e.paddingTop=parseInt(e.sidebar.css("padding-top")), e.paddingBottom=parseInt(e.sidebar.css("padding-bottom"));
                    var a, s, n, d=e.stickySidebar.offset().top, r=e.stickySidebar.outerHeight();

function p() {
                        e.fixedScrollTop=0, e.sidebar.css( {
                            "min-height": "1px"
                        }

), e.stickySidebar.css( {
                            position: "static", width:"", transform:"none"
                        }

)
                    }

e.stickySidebar.css("padding-top", 1), e.stickySidebar.css("padding-bottom", 1), d-=e.stickySidebar.offset().top, r=e.stickySidebar.outerHeight()-r-d, 0==d?(e.stickySidebar.css("padding-top", 0), e.stickySidebarPaddingTop=0):e.stickySidebarPaddingTop=1, 0==r?(e.stickySidebar.css("padding-bottom", 0), e.stickySidebarPaddingBottom=0):e.stickySidebarPaddingBottom=1, e.previousScrollTop=null, e.fixedScrollTop=0, p(), e.onScroll=function(e) {
                        if(e.stickySidebar.is(":visible"))if(i("body").width()<e.options.minWidth)p();

else {
                            if(e.options.disableOnResponsiveLayouts) {
                                var o=e.sidebar.outerWidth("none"==e.sidebar.css("float"));
                                if(o+50>e.container.width())return void p()
                            }

var a, s, n=i(document).scrollTop(), d="static";

if(n>=e.sidebar.offset().top+(e.paddingTop-e.options.additionalMarginTop)) {
                                var r, b=e.paddingTop+t.additionalMarginTop, l=e.paddingBottom+e.marginBottom+t.additionalMarginBottom, h=e.sidebar.offset().top, f=e.sidebar.offset().top+(a=e.container, s=a.height(), a.children().each(function() {
                                    s=Math.max(s, i(this).height())
                                }

), s), g=0+t.additionalMarginTop, S=e.stickySidebar.outerHeight()+b+l<i(window).height();
                                r=S?g+e.stickySidebar.outerHeight():i(window).height()-e.marginBottom-e.paddingBottom-t.additionalMarginBottom;
                                var m=h-n+e.paddingTop, y=f-n-e.paddingBottom-e.marginBottom, u=e.stickySidebar.offset().top-n, k=e.previousScrollTop-n;
                                "fixed"==e.stickySidebar.css("position")&&"modern"==e.options.sidebarBehavior&&(u+=k), "stick-to-top"==e.options.sidebarBehavior&&(u=t.additionalMarginTop), "stick-to-bottom"==e.options.sidebarBehavior&&(u=r-e.stickySidebar.outerHeight()), u=k>0?Math.min(u, g):Math.max(u, r-e.stickySidebar.outerHeight()), u=Math.max(u, m), u=Math.min(u, y-e.stickySidebar.outerHeight());
                                var v=e.container.height()==e.stickySidebar.outerHeight();
                                d=(v||u !=g)&&(v||u !=r-e.stickySidebar.outerHeight())?n+u-e.sidebar.offset().top-e.paddingTop<=t.additionalMarginTop?"static":"absolute":"fixed"
                            }

if("fixed"==d) {
                                var x=i(document).scrollLeft();

e.stickySidebar.css( {
                                    position: "fixed", width:c(e.stickySidebar)+"px", transform:"translateY("+u+"px)", left:e.sidebar.offset().left+parseInt(e.sidebar.css("padding-left"))-x+"px", top:"0px"
                                }

)
                            }

else if("absolute"==d) {
                                var T= {}

;
                                "absolute" !=e.stickySidebar.css("position")&&(T.position="absolute", T.transform="translateY("+(n+u-e.sidebar.offset().top-e.stickySidebarPaddingTop-e.stickySidebarPaddingBottom)+"px)", T.top="0px"), T.width=c(e.stickySidebar)+"px", T.left="", e.stickySidebar.css(T)
                            }

else"static"==d&&p();

"static" !=d&&1==e.options.updateSidebarHeight&&e.sidebar.css( {
                                "min-height": e.stickySidebar.outerHeight()+e.stickySidebar.offset().top-e.sidebar.offset().top+e.paddingBottom
                            }

), e.previousScrollTop=n
                        }
                    }

, e.onScroll(e), i(document).on("scroll."+e.options.namespace, (a=e, function() {
                        a.onScroll(a)
                    }

)), i(window).on("resize."+e.options.namespace, (s=e, function() {
                        s.stickySidebar.css( {
                            position: "static"
                        }

), s.onScroll(s)
                    }

)), "undefined" !=typeof ResizeSensor&&new ResizeSensor(e.stickySidebar[0], (n=e, function() {
                        n.onScroll(n)
                    }

))
                }

)
            }

(t, e),  !0)
        }

function c(i) {
            var t;

try {
                t=i[0].getBoundingClientRect().width
            }

catch(i) {}

return void 0===t&&(t=i.width()),
            t
        }

return(t=i.extend( {
            containerSelector: "", additionalMarginTop:0, additionalMarginBottom:0, updateSidebarHeight: !0, minWidth:0, disableOnResponsiveLayouts: !0, sidebarBehavior:"modern", defaultPosition:"relative", namespace:"TSS"
        }

, t)).additionalMarginTop=parseInt(t.additionalMarginTop)||0,
        t.additionalMarginBottom=parseInt(t.additionalMarginBottom)||0,
        r(e=t, o=this)||(console.log("TSS: Body width smaller than options.minWidth. Init is delayed."), i(document).on("scroll."+e.namespace, (n=e, d=o, function(t) {
            var e=r(n, d);
            e&&i(this).unbind(t)
        }

)), i(window).on("resize."+e.namespace, (a=e, s=o, function(t) {
            var e=r(a, s);
            e&&i(this).unbind(t)
        }

))),
        this
    }
}
(jQuery);
/*]]>*/
</script>
<script type='text/javascript'>
//<![CDATA[
var $StickySidebar = jQuery.noConflict();
$StickySidebar(document).ready(function(){
    "use strict";
/*--------------------- //StickySidebar ---------------------*/
    $StickySidebar(".sidebar").theiaStickySidebar({
        additionalMarginTop: 90,
         additionalMarginBottom: -15,
    });

}); // End $StickySidebar(document).ready(function(){
//]]>
</script>

الكاتب

Mohsen Abdo

الإنشاء

02 ديسمبر 2021

آخر تحديث

المشاهدات

404

مقدمة

التعديل على السكربت

<div class="sidebar">

(".sidebar")

<div class="sidebar">

$StickySidebar(".sidebar").theiaStickySidebar({
additionalMarginTop: 90,
additionalMarginBottom: -15,
});

<div id="sidebar">

("#sidebar")

$StickySidebar("#sidebar").theiaStickySidebar({
additionalMarginTop: 90,
additionalMarginBottom: -15,
});

شرح التعديل على السكربت

additionalMarginTop: 90

additionalMarginBottom: -15

إذا كان القالب يحتوي على قائمتين يسري وآخري يمني

$StickySidebar(".sidebar, .sidebar-2").theiaStickySidebar({
additionalMarginTop: 90,
additionalMarginBottom: -15,
});

الشرح بالفيديو

</body>

السكربت:

شارك المقال على شبكات التواصل

هناك تعليقان (2):

تابعنا على شبكات التواصل

أقسام الموقع

الموقع الرسمي

نموذج الاتصال

عن مدير الموقع

404

مقدمة

التعديل على السكربت

<div class="sidebar">

(".sidebar")

<div class="sidebar">

$StickySidebar(".sidebar").theiaStickySidebar({ additionalMarginTop: 90, additionalMarginBottom: -15, });

<div id="sidebar">

("#sidebar")

$StickySidebar("#sidebar").theiaStickySidebar({ additionalMarginTop: 90, additionalMarginBottom: -15, });

شرح التعديل على السكربت

additionalMarginTop: 90

additionalMarginBottom: -15

إذا كان القالب يحتوي على قائمتين يسري وآخري يمني

$StickySidebar(".sidebar, .sidebar-2").theiaStickySidebar({ additionalMarginTop: 90, additionalMarginBottom: -15, });

الشرح بالفيديو

</body>

السكربت:

شارك المقال على شبكات التواصل

المنشورات ذات الصلة

هناك تعليقان (2):

تابعنا على شبكات التواصل

أقسام الموقع

الموقع الرسمي

نموذج الاتصال

عن مدير الموقع

$StickySidebar(".sidebar").theiaStickySidebar({
additionalMarginTop: 90,
additionalMarginBottom: -15,
});

$StickySidebar("#sidebar").theiaStickySidebar({
additionalMarginTop: 90,
additionalMarginBottom: -15,
});

$StickySidebar(".sidebar, .sidebar-2").theiaStickySidebar({
additionalMarginTop: 90,
additionalMarginBottom: -15,
});