صورة ونص كشعار

الدعم
1

مرحبًا.

لقد قمت بإعداد صورة “شعار” (logo) لمنتدىي، كما قمت بتعيين “عنوان” (title).

حاليًا، يظهر فقط “الشعار” في الرأس. أود جعل “العنوان” يظهر بجانبه على اليمين. أريد أن يكون بنفس التنسيق الذي تظهر فيه عناوين المواضيع بجانب الشعار عند التمرير لأسفل الصفحة — أي أن يظهر الشعار وعنوان الموقع افتراضيًا، ثم عند التمرير داخل موضوع ما، يتم استبدال عنوان الموقع بعنوان الموضوع.

هل هذا ممكن؟ لقد بحثت في Google ولم أجد حلاً.

شكرًا لك.

2

إذا كنت تريد نصًا أيضًا، فلماذا لا تصمم شعارًا يتضمن النص؟

3

يمكنك فعل شيء مثل هذا

d-header .title::after {
    padding-left: 20px;
    font-size: 1.5em;
    color:  #333;
    content: "Here is some text";
}

image
image1004×394 21.3 KB

لا يزال يتعين عليك إخفاؤه في الأماكن التي لا تريدها فيها، مثل عند عرض عنوان الموضوع

image
image994×402 20.6 KB

يمكنك فعل ذلك بعدم عرضه في الصفحات التي تحتوي على فئة الجسم archetype-regular (في هذه الحالة لن يظهر في صفحات الموضوعات على الإطلاق) أو باستخدام JavaScript يجعله يختفي، تمامًا كما يتم استبدال الشعارات الكبيرة والصغيرة بمجرد البدء في التمرير

5

شكرًا جزيلاً لك على ردك. هذا رائع!

هل تعرف أي كود JavaScript أحتاجه لجعله يختفي كما ذكرت؟ سيكون ذلك ممتازًا.

6

جرب هذا

.d-header .title::after {
    padding-left: 20px;
    font-size: 1.5em;
    color:  #333;
    content: "Here is some text";
}
.archetype-regular #main.no-text .d-header .title::after,
.archetype-private_message #main.no-text .d-header .title::after  {
    display:none;
}

<script>
    $(document).ready(function() {
    	$(window).scroll(function(){
    		checkScroll()
        }); 
    
    	function checkScroll() {
    		var y = $(window).scrollTop();		
    		if (y > 55) {
                document.getElementById("main").classList.add('no-text');
            } else {
                document.getElementById("main").classList.remove('no-text');
            }
    	}
    	checkScroll();
    });
</script>

إليك ذلك كمكون

7

شكرًا جزيلاً! هذا مثالي.